I'm trying to apply both a table class and columns styling properties to a DataTable. However, none of the attributes actually do something.
I have written // doesn't do anything where something doesn't seem to work like I want it to.
The table data is added dynamically shortly after the table is created.
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link href="//cdn.datatables.net/1.10.7/css/jquery.dataTables.min.css" rel="stylesheet"/>
<script src="//cdn.datatables.net/1.10.7/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="socket.io/socket.io.js"></script>
<script type="text/javascript" src="./js/client.js"></script>
<style>
.override {
display:solid; !important;
}
</style>
<script>
$(document).ready(function() {
$('#demo').html('<table cellpadding="0" cellspacing="0" border="0" class="stripe" id="example" ></table>');
// class= doesn't do anything
t = $('#example').DataTable({
columns:
[
{width:"300px", title: "Name", data: "name" },
// width doesn't do anything
{className: "dt[-head|-body]-right", title: "Age", data: "age" },
// className doesn't do anything
{title: "Nationality", data: "nationality"}
]
});
connect();
});
</script>
</head>
<body>
<div id="demo" style="width:500px"> </div>
</body>
</html>
Try adding 'https' in the begenning of these two links and then execute the code.
1- link href="https://cdn.datatables.net/1.10.7/css/jquery.dataTables.min.css" rel="stylesheet"
2- script src="https://cdn.datatables.net/1.10.7/js/jquery.dataTables.min.js"
Try the below Solution, Load Contents from CDN correctly.
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link href="http://cdn.datatables.net/1.10.7/css/jquery.dataTables.min.css" rel="stylesheet"/>
<script src="http://cdn.datatables.net/1.10.7/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="socket.io/socket.io.js"></script>
<script type="text/javascript" src="./js/client.js"></script>
<style>
.override {
display:solid; !important;
}
</style>
<script>
$(document).ready(function() {
$("#demo").html("<table cellpadding='0' cellspacing='0' border='0' class='stripe' id='example'></table>");
// class= doesn't do anything
t = $('#example').DataTable({
columns:
[
{width:"300px", title: "Name", data: "name" },
// width doesn't do anything
{className: "dt[-head|-body]-right", title: "Age", data: "age" },
// className doesn't do anything
{title: "Nationality", data: "nationality"}
]
});
connect();
});
</script>
</head>
<body>
<div id="demo" style="width:500px"> </div>
</body>
</html>
Related
I have a page with HighCharts and a datatable. First row and Highcharts function well together. I'm attempting to develop the following test case:
When a page loads, it should provide a table and a highchart for only the first value (Data1) in the drop-down menu.
When I choose a different value, "Test," it should only display data for "Test" in the table and the corresponding HighChart. Likewise for the third value. How do I accomplish this? I currently have this.
Thanks in advance.
http://live.datatables.net/febayaxa/4/edit
$(document).ready(function() {
var tableData = [];
var tableCategories = [];
var table = $("#example1").DataTable({
orderCellsTop: true,
searching: true,
lengthChange: false,
initComplete: function(settings, json) {
let api = new $.fn.dataTable.Api(settings);
// get the seris data as an array of numbers from the table row data:
api.rows().data().toArray()[0].forEach(function(element, index) {
if (index > 0) {
tableData.push(parseFloat(element.replace(/,/g, '')));
}
});
// get the x-axis caregories from the table headings:
api.columns().header().toArray().forEach(function(element, index) {
if (index > 0) {
tableCategories.push($(element).html());
}
});
}
});
var myChart = Highcharts.chart("container", {
chart: {
type: "column"
},
title: {
text: "Test Data"
},
xAxis: {
categories: tableCategories
},
series: [{
data: tableData
}]
});
});
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<link href="https://nightly.datatables.net/css/jquery.dataTables.css" rel="stylesheet" type="text/css" />
<script src="https://nightly.datatables.net/js/jquery.dataTables.js"></script>
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<link href="https://nightly.datatables.net/css/jquery.dataTables.css" rel="stylesheet" type="text/css" />
<script src="https://nightly.datatables.net/js/jquery.dataTables.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<meta charset=utf-8 />
</head>
<body>
<p>Test Blah Blah</p>
<p><select id="table-filter">
<option>Select</option>
<option>Data1</option>
<option>Test</option>
<option>More</option>
</select>
</p>
<div id="showMe">Value Selected</div>
<div id="table-wrap">
<div id="container" style=" width: 100%; height: 400px;"></div>
<div class="container">
<table id="example1" class="display nowrap" width="100%"><thead>
<tr><th>Year</th><th>2012</th><th>2013</th><th>2014</th><th>2015</th><th>2016</th><th>2017</th><th>2018</th><th>2019</th><th>2020</th><th>2021</th></tr></thead>
<tr ><td> Data1</td><td>3823</td><td>3,823</td><td>3,954</td><td>3,959</td><td>3,955</td><td>3,956</td><td>3,843</td><td>3,699</td><td>3,472</td><td>3,551</td></tr>
<tr ><td>Test</td><td>4000</td><td>3,823</td><td>3,954</td><td>3,959</td><td>3,955</td><td>3,956</td><td>3,843</td><td>3,699</td><td>3,472</td><td>3,551</td></tr>
<tr ><td>More</td><td>3900</td><td>3,823</td><td>3,954</td><td>3,959</td><td>3,955</td><td>3,956</td><td>3,843</td><td>3,699</td><td>3,472</td><td>3,551</td></tr>
</tbody>
</tbody></table>
I am new in PHP and JavaScript, i need to create a pie chart using JSON data which will be get from the URL. The JSON data is :
[
{"Domain":"Artificial Intelligence","Count":"46"},
{"Domain":"Data Architecture","Count":"21"},
{"Domain":"Data Science","Count":"50"},
]
The code :
<!DOCTYPE html>
<html>
<head>
<title></title>
<link href="http://cdn-na.infragistics.com/igniteui/2018.1/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet" />
<link href="http://cdn-na.infragistics.com/igniteui/2018.1/latest/css/structure/infragistics.css" rel="stylesheet" />
<script src="http://ajax.aspnetcdn.com/ajax/modernizr/modernizr-2.8.3.js">
</script>
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script>
<script src="http://cdn- na.infragistics.com/igniteui/2018.1/latest/js/infragistics.core.js"></script>
<script src="http://cdn-na.infragistics.com/igniteui/2018.1/latest/js/infragistics.dv.js"></script>
</head>
<body>
<?php
# Reading JSN Data from URLS
$jsn_data =
file_get_contents("http://localhost:9080/Badges/reporting/badge_json.php");
<div id="chart"></div>
<script type="text/javascript">
$("#chart").igPieChart({
width: "435px",
height: "435px",
dataSource: result,
dataValue: "count",
dataLabel: "Domain",
labelsPosition: "bestFit"
});
});
<script>
</body>
s</html>
But this code does not work. please tell me how do this ?
dataLabel: "Badge_SubDomain" doesn't exist in your data source.
Maybe try something like ...
$("#chart").igPieChart({
width: "435px",
height: "435px",
dataSource: result,
dataValue: "count",
dataLabel: "Domain",
labelsPosition: "bestFit"
});
});
Fix these:
JSON property Count is a string, not an integer
The code is broken, it needs to be fixed
The variable result is not defined anywhere in the <script> tag
The JavaScript snippet is inside <?php/> tag, move it outside
here's the fixed code:
index.php:
<!DOCTYPE html>
<html>
<head>
<title></title>
<link href="http://cdn-na.infragistics.com/igniteui/2018.1/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet"></script>
<link href="http://cdn-na.infragistics.com/igniteui/2018.1/latest/css/structure/infragistics.css" rel="stylesheet"></script>
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/modernizr/modernizr-2.8.3.js"></script>
<script src="http://cdn-na.infragistics.com/igniteui/2018.1/latest/js/infragistics.core.js"></script>
<script src="http://cdn-na.infragistics.com/igniteui/2018.1/latest/js/infragistics.dv.js"></script>
</head>
<body>
<div id="chart"></div>
<script type="text/javascript">
$.ajax({type:"GET", url: "badge_json.php", success: function(data) {
$("#chart").igPieChart({
width: "435px",
height: "435px",
dataSource: data,
dataValue: "Count",
dataLabel: "Domain",
labelsPosition: "bestFit"
});
}});
</script>
</body>
</html>
and badge_json.php:
<?php
header('Content-type: application/json');
// your data goes here
$data = array(
['Domain' => 'Artificial Intelligence', 'Count' => 46],
['Domain' => 'Data Architecture', 'Count' => 21],
['Domain' => 'Data Science', 'Count' => 50]
);
echo json_encode($data);
?>
I try this table feature
https://datatables.net/examples/basic_init/scroll_xy.html
i have dropdown and date picker so i add links for table and datetime picker links then i add table and also i use script for this but when i select datetime picker then calendar is not display then when i check console this show error
I try to export table data in excel
WebForm1.aspx:34 Uncaught TypeError: $(...).Datatable is not a function
CODE
<%--for tabledata--%>
<script type="text/javascript" src="//code.jquery.com/jquery-1.12.3.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.12/css/jquery.dataTables.min.css" />
<link href="Styles/stylechart.css" rel="stylesheet" />
<!--for date--%>-->
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.0/themes/base/jquery-ui.css" />
<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script type="text/javascript" src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#tabledata").Datatable({
dom: 'Bfrtip',
buttons: [
'excelHtml5'
]
});
});
</script>
<table id="tabledata" cellspacing="0" class="display nowrap inner_table">
</table>
updated:
success: function (result) {
var final = JSON.parse(result.d).response;
console.log(JSON.parse(result.d).response);
$("#tabledata").empty();
if (final.length > 0) {
$("#tabledata").append(
"<thead><tr><th>RegNo</th></tr></thead>");
for (var i = 0; i < final.length; i++) {
if (final[i] !== null) {
$("#tabledata").append("<tbody><tr><td>" +
final[i][0] + "</td> </tr></tbody>");
}
}
}
you are using multiple references of jquery file.Also order is more important for any plugin to work properly.
Also try to avoid writing protocol http or https before script reference , just add simple // and it will automatically detect on which protocol your app is working and load reference file according to it.
change your reference section to scripts like given below.
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.12/css/jquery.dataTables.min.css" />
<link href="Styles/stylechart.css" rel="stylesheet" />
<!--for date--%>-->
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.0/themes/base/jquery-ui.css" />
<script type="text/javascript" src="//code.jquery.com/jquery-1.12.4.js"></script>
<script type="text/javascript" src="//code.jquery.com/ui/1.12.0/jquery-ui.js"></script>
<script type="text/javascript" src="//cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#tabledata").Datatable({
dom: 'Bfrtip',
buttons: [
'excelHtml5'
]
});
});
</script>
<table id="tabledata" cellspacing="0" class="display nowrap inner_table">
<thead>
<tr>
<th>Column1</th>
<th>Column2</th>
<th>Column3</th>
<th>Column4</th>
</tr>
</thead>
</table>
try this:
$('#tabledata').DataTable({
sDom: 'TC<"clear">lfrtip',
"iDisplayLength": 10,
"oTableTools": {
***add*** "sSwfPath": "//cdn.datatables.net/tabletools/2.2.0/swf/copy_csv_xls_pdf.swf",
"aButtons": [
"copy",
"csv",
"xls",
{
i have made a simple HTML Form. I want to grab some JSON data out of a CouchDB and display it in jqGrid. But all i get is this sh**** Output in Firefox or IE. Output Firefox
It's just one row but i don't know why the list gets so long. I also dont know why some parts are pulled apart (sorry i cant speak good english).
This is how it looks before i start the javascript action and i made a simple red box indicatting where the jqGrid should be: HTML Page before Action
As you can see, my two textboxes get covered by the jqGrid.
I dont know what causes this Problem and i don't have enough Knowledge of all this. Can someone help me ?
Here is my Code:
index.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title>Testformular</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js" type="text/javascript"></script>
<!--<script type="text/javascript" charset="utf8" src="/DataTables/js/jquery.dataTables.js"></script>-->
<!--<script src="jqgrid/js/minified/jquery-1.11.0.min.js" type="text/javascript"></script>-->
<script src="jqgrid/js/i18n/grid.locale-de.js" type="text/javascript"></script>
<script src="jqgrid/js/minified/jquery.jqGrid.min.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" media="screen" href="jqgrid/css/ui-lightness/jquery-ui.css">
<link rel="stylesheet" type="text/css" media="screen" href="jqgrid/css/ui-lightness/jquery-ui.min.css">
<link rel="stylesheet" type="text/css" media="screen" href="jqgrid/css/ui-lightness/jquery-ui.structure.css">
<link rel="stylesheet" type="text/css" media="screen" href="jqgrid/css/ui-lightness/jquery-ui.theme.css">
<!--
<script type="text/javascript" src="jqwidgets/jqwidgets/jqxcore.js"></script>
<script type="text/javascript" src="jqwidgets/jqwidgets/jqxdata.js"></script>
<script type="text/javascript" src="jqwidgets/jqwidgets/jqxbuttons.js"></script>
<script type="text/javascript" src="jqwidgets/jqwidgets/jqxscrollbar.js"></script>
<script type="text/javascript" src="jqwidgets/jqwidgets/jqxmenu.js"></script>
<script type="text/javascript" src="jqwidgets/jqwidgets/jqxcheckbox.js"></script>
<script type="text/javascript" src="jqwidgets/jqwidgets/jqxlistbox.js"></script>
<script type="text/javascript" src="jqwidgets/jqwidgets/jqxdropdownlist.js"></script>
<script type="text/javascript" src="jqwidgets/jqwidgets/jqxgrid.js"></script>
<script type="text/javascript" src="jqwidgets/jqwidgets/jqxgrid.sort.js"></script>
<script type="text/javascript" src="jqwidgets/jqwidgets/jqxgrid.pager.js"></script>
<script type="text/javascript" src="jqwidgets/jqwidgets/jqxgrid.selection.js"></script>
<script type="text/javascript" src="jqwidgets/jqwidgets/jqxgrid.edit.js"></script>
<script type="text/javascript" src="jqwidgets/jqwidgets/jqxgrid.columnsresize.js"></script>
<script type="text/javascript" src="jqwidgets/scripts/demos.js"></script>
-->
<link rel="stylesheet" type="text/css" media="screen" href="jqgrid/css/ui.jqgrid.css">
<!--<link rel="stylesheet" type="text/css" href="/DataTables/css/jquery.dataTables.css">-->
<link rel="stylesheet" type="text/css" href="index.css">
<script src="index2.js" type="text/javascript"></script>
</head>
<body onLoad="inputonload();">
<div class="page">
<div class="eingabe">
<form name="form" method="post">
<div>
<input class="input" onmouseover="clearOnClickFromkkz()" onmouseout="test()" value="Kundenkürzel" type="text" id="kkz">
</div>
<div>
<input class="input" onmouseover="clearOnClickFrommgr()" onmouseout="manager_updat()" type="text" id="mgr" name="manager" value="Manager">
</div>
</form>
</div>
<table id="Grid1" style="height: 290px; width: 444px"><div id="gridpager"></div></table>
</div>
</div>
</body>
</html>
My Javascript File
function clearOnClickFromkkz() {
if (document.getElementById('kkz').value === "Kundenkürzel") {
document.getElementById('kkz').value = "";
document.getElementById('kkz').style.color = "#000000";
}
}
function clearOnClickFrommgr() {
if (document.getElementById('mgr').value === "Manager") {
document.getElementById('mgr').value = "";
document.getElementById('mgr').style.color = "#000000";
}
}
function inputonload() {
document.getElementById('kkz').style.color = "#A1A1A1";
document.getElementById('mgr').style.color = "#A1A1A1";
}
function manager_updat() {
var link = 'http://127.0.0.1:5984/php_couch3/_design/mgr/_view/by_mgr?key="' + document.getElementById('mgr').value + '"';
var request = $.ajax({
type: 'GET',
url: link,
dataType: "json",
});
request.done(function(data){
console.log(data);
$("#content").html(data);
});
if (document.getElementById('mgr').value === "") {
document.getElementById('mgr').value = "Manager";
document.getElementById('mgr').style.color = "#A1A1A1";
}
}
function sid_update() {
var link = 'http://127.0.0.1:5984/php_couch3/_design/sid/_view/by_sid?key="' + document.getElementById('kkz').value + '"';
var request = $.ajax({
type: 'GET',
url: link,
dataType: "json",
});
request.done(function(data){
console.log(data);
$("#content").html(data);
});
if (document.getElementById('kkz').value === "") {
document.getElementById('kkz').value = "Kundenkürzel";
document.getElementById('kkz').style.color = "#A1A1A1";
}
}
function test() {
jQuery(document).ready(function () {
var pager = '#gridpager';
jQuery("#Grid1").jqGrid({
url: 'http://127.0.0.1:5984/php_couch3/_design/sid/_view/by_sid?key="' + document.getElementById('kkz').value + '"',
datatype: 'json',
mtype: 'GET',
colNames: ['key', 'value'],
colModel: [{ name: 'key', index: 'key', width: 150 },
{ name: 'value', index: 'value', width: 150}],
sortname: 'id',
pager: '#gridpager',
viewrecoreds: true,
scrollOffset: 0,
imgpath: 'Themes/images'
}).navGrid(pager, {edit: true, add: true, del: true, refresh: true, search: true, position: 'left'});
});
}
And my CSS File:
body{
}
.input {
margin:0px;
font-size:12px;
width:90%;
height:30px;
margin-bottom: 2px;
float:left;
text-align:center;
vertical-align:middle
}
div.eingabe {
width:150px;
float:left;
border: 0px;
padding: 0px;
margin: 0 0 0 0;
}
div.content {
border:1px solid #efeff7;
background-color:#efeff7;
width:650px;
height:100%;
float:right;
}
div.page {
position:absolute;
width:805px;
height:90%;
min-height:600px;
margin-left: 25%;
margin-top:10px;
border: 0px lime solid;
}
First, check that you are getting data. Use the dev console in FF/Chrome/IE you access it with F12, you can see the network tab and check your requests and responses.
Also there you can see any errors on the javascript code, check the console output
I want to implement a suggestion combobox which shows suggestions grabbed from my own web service (using restapi and jsonp). I found that ComboBox.store.root.children contains suggestion's data and wrote the code below. For the simplicity I use there array instead of getting suggestions from my service.
The problem with that is it looks like a hack and some features don't work properly. For instance, I can't get rid of 'Search' phrase in the list.
Can you suggest more elegant solution?
<head>
<style type="text/css">
body, html { font-family:helvetica,arial,sans-serif; font-size:90%; }
</style>
<script src="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dojo/dojo.xd.js"
djConfig="parseOnLoad: true">
</script>
<script type="text/javascript">
dojo.require("dijit.form.ComboBox");
</script>
<script type="text/javascript">
dojo.addOnLoad(function() {
var cb = dijit.byId("searchQuery");
var bufToClone = cb.store.root.children[0];
cb.store.root.children[0] = null;
var suggestions = ["AAA", "BBB", "CCC"];
dojo.connect(cb, "onKeyPress", function(event) {
var newval = cb.textbox.value;
dojo.forEach(suggestions, function(entry, i) {
var newVal = dojo.clone(bufToClone);
newVal.value = entry;
newVal.text = entry;
cb.store.root.children[i] = newVal;
});
});
});
</script>
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dijit/themes/claro/claro.css"
/>
</head>
<body class=" claro ">
<select dojoType="dijit.form.ComboBox" id="searchQuery" name="searchQuery" class="sQ">
<option>
Search
</option>
</select>
</body>
Are you expecting this
<html>
<head>
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dijit/themes/claro/claro.css"/>
<style type="text/css">
body, html { font-family:helvetica,arial,sans-serif; font-size:90%; }
</style>
<script src="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dojo/dojo.xd.js"
djConfig="parseOnLoad: true">
</script>
<script type="text/javascript">
dojo.require("dijit.form.ComboBox");
dojo.require("dojo.data.ItemFileWriteStore");
dojo.require("dijit.form.Button");
</script>
<script type="text/javascript">
var idg = 4;
dojo.addOnLoad(function() {
str = new dojo.data.ItemFileWriteStore({
data:{
identifier:'id',
label:'name',
items:[
{id:1,name:'me'},
{id:2,name:'you'},
{id:3,name:'stackoverflow'}
]
}
})
new dijit.form.ComboBox({
store:str,
name:"searchQuery",
onChange:function(){
alert(dojo.query("[name=searchQuery]")[0].value)
}
},"searchQueryHld")
});
</script>
</head>
<body class=" claro ">
<span id="searchQueryHld"></span>
<span dojoType="dijit.form.Button">
Add one option
<script type="dojo/method" event="onClick">
str.newItem({id:idg,name:'me'+idg})
idg++;
</script>
</span>
</body>
</html>