Develop Reference

Datatables.net no load JSON - SignalR

I want to load the following JSON object into Datatables.net but it does not work. I tried to find a solution like this: Datatables.net json data load, but without success.
I use SignalR to pass the JSON from the server-side to the client, and it runs because I can receive the JSON but I can't load it into a Datatable.
Please, could someone help me?
Thanks in advance!
C# code:
cmm_dbEntities db = new cmm_dbEntities();
var result = from a in db.TAB_PN
join b in db.TAB_APPL on a.idapplicability equals b.idapplicability
join c in db.TAB_ISSUE on a.idissue equals c.idissue
select new
{
a.pn,
a.title,
b.appl_desc,
c.issue,
c.issue_date,
c.rev,
c.rev_date,
a.equipment,
a.formattype
};
var obj = new { data = result };
string json = JsonConvert.SerializeObject(obj);
return json;
Here is my JSON:
{
"data": [{
"pn": "346B0300A3300.801",
"title": "Test Bench Replenish Unit, Engine Oil - Operation and Maintenance Manual with Illustrated Parts Breakdown",
"appl_desc": "DESCRIZIONE 005",
"issue": "ISSUE-003",
"issue_date": "2015-03-01T00:00:00",
"rev": "0003",
"rev_date": "AAAAAAAAB9M=",
"equipment": "Test Bench, Replenish Unit, Engine Oil",
"formattype": "XML"
}, {
"pn": "346B0300A3300.805",
"title": "Test Bench Replenish Unit, Engine Oil - Operation and Maintenance Manual with Illustrated Parts Breakdown",
"appl_desc": "DESCRIZIONE 015",
"issue": "ISSUE-004",
"issue_date": "2015-04-01T00:00:00",
"rev": "004",
"rev_date": "AAAAAAAAB9Q=",
"equipment": "Test Bench, Replenish Unit, Engine Oil",
"formattype": "XML"
}, {
"pn": "415808",
"title": "Operating and Maintenance Manual for Ni-Cd Aircraft batteries",
"appl_desc": "DESCRIZIONE 015",
"issue": "ISSUE-001",
"issue_date": "2015-01-01T00:00:00",
"rev": "0001",
"rev_date": "AAAAAAAAB9E=",
"equipment": "Battery",
"formattype": "XML"
}, {
"pn": "415818",
"title": "Operating and Maintenance Manual for Ni-Cd Aircraft batteries",
"appl_desc": "DESCRIZIONE 009",
"issue": "ISSUE-002",
"issue_date": "2015-02-01T00:00:00",
"rev": "0002",
"rev_date": "AAAAAAAAB9I=",
"equipment": "Battery",
"formattype": "XML"
}]
}
Here is my js:
hub.client.inizializzaFiltri = function (data) {
console.log(data);
$('#PNTable').DataTable({
dataSrc: "objects",
columns: [
{ data: null, defaultContent: '' },
{ data: 'pn' },
{ data: 'title' },
{ data: 'appl_desc' },
{ data: 'issue' },
{ data: 'issue_date' },
{ data: 'rev' },
{ data: 'rev_date' },
{ data: 'equipment' },
{ data: 'formattype' }],
order: [[1, "asc"]],
columnDefs: [
{
orderable: false,
className: 'select-checkbox',
targets: 0
},
],
retrieve: true,
select: {
style: 'os',
selector: 'td:first-child'
}
});
}
My HTML code:
<table id="PNTable" class="display">
<thead>
<tr>
<th></th>
<th>pn</th>
<th>title</th>
<th>appl_desc</th>
<th>issue</th>
<th>issue_date</th>
<th>rev</th>
<th>rev_date</th>
<th>equipment</th>
<th>formattype</th>
</tr>
</thead>
<tfoot>
<tr>
<th></th>
<th>pn</th>
<th>title</th>
<th>appl_desc</th>
<th>issue</th>
<th>issue_date</th>
<th>rev</th>
<th>rev_date</th>
<th>equipment</th>
<th>formattype</th>
</tr>
</tfoot>
</table>

I did not see you setting the property data. Please assign data: data when you initialize the table.
hub.client.inizializzaFiltri = function (data) {
console.log(data);
$('#PNTable').DataTable({
data: data //you are missing this
dataSrc: "objects",
columns: [
{ data: null, defaultContent: '' },
{ data: 'pn' },
{ data: 'title' },
{ data: 'appl_desc' },
{ data: 'issue' },
{ data: 'issue_date' },
{ data: 'rev' },
{ data: 'rev_date' },
{ data: 'equipment' },
{ data: 'formattype' }],
order: [[1, "asc"]],
columnDefs: [
{
orderable: false,
className: 'select-checkbox',
targets: 0
},
],
retrieve: true,
select: {
style: 'os',
selector: 'td:first-child'
}
});
}

Thanks again #naveen #ehsanmhdi and #rahsharm77 for your suggestions.
I solved in this way...
C# code:
...
var obj = new { data = result };
string json = JsonConvert.SerializeObject(obj);
return json;
JS code:
hub.client.inizializzaFiltri = function (data) {
var jsn = JSON.parse(data);
$('#PNTable').DataTable({
"bPaginate": false,
"bLengthChange": false,
"bFilter": true,
"bInfo": true,
"bAutoWidth": true,
"dataSrc": "",
"data": jsn.data,
"dataSrc": jsn.data,
responsive: true,
columns: [
{ "data": null, defaultContent: '' },
{ "data": 'pn' },
{ "data": 'title' },
...
I have to Deserialize che JSON using JSON.parse(data) before to put it in the DataTable.
Thanks again

Send more values via URL

I am using Datatable plug-in to print values from database.
I get results and it prints in table. Now I am having trouble with sending values to the other file. Values that I need to send are userID, all titles of column except for last title, and two other variables which contains date.
When I click on '', beside data that contains userId, I need to send "User, Work time, Additions, Business, Break" as well as two variables printed below.
Other two variables are:
var date1 = "2017-01-01";
var date2 = "2017-02-28";
$('#myData').DataTable( {
data: dataSet,
fixedHeader: true,
responsive: true,
"columns": [
{ title: "User", data: "ime"},
{ title: "Work time", data: "Rad" },
{ title: "Additions", data: "Privatno" },
{ title: "Business", data: "Poslovno" },
{ title: "Break", data: "Pauza" },
{
"title": '<i class="icon-file-plus"></i>',
"data": "userID",
"render": function (data) {
return '' + '<i class="icon-file-plus"></i>' + '';
}, "width": "1%",
}
]
,"columnDefs": [ { "defaultContent": "-", "targets": "_all" },{ className: "dt-body-center", "targets": [ 5 ] } ]
});
Any help or advice is appreciated, I am stuck here.

Datatables initialization warning

I have a dropdown with multiple options that initializes a datatable using javascript. Everything works fine but the problem comes during execution in which when the option is selected second time i get an error , check out this fiddle,
DataTables warning (table id = 'defDiv'): Cannot reinitialise DataTable.
And Below is my code :
if(user.position=="DEF"){
var table = $('#defDiv').DataTable({
"aaData":defenders,
"iDisplayLength":15,
"aoColumns": [
{ "mDataProp": "playerInfo" },
{ "mDataProp": "playerName" },
{ "mDataProp": "playerClub" },
{ "mDataProp": "playerValue" },
{ "mDataProp": "playerPoints" },
],
"order": [[ 3, "desc" ]],
});
}
Question is how can i prevent the warning from happening when the option is selected again ?

I've altered you code and it works now:
var goalkepeers = [{
"playerName": "Mignolet",
"playerClub": "Liverpool",
"playerValue": "5.0",
"playerPoints": "89",
}, {
"playerName": "de Gea",
"playerClub": "Manchester",
"playerValue": "6.7",
"playerPoints": "120",
}];
var defenders = [{
"playerName": "Ivanovic",
"playerClub": "Chelsea",
"playerValue": "7.8",
"playerPoints": "100",
}, {
"playerName": "Mertesacker",
"playerClub": "Arsenal",
"playerValue": "7.7",
"playerPoints": "110",
}];
var aoColumns = [{
"sTitle": "Name",
"mDataProp": "playerName"
},{
"sTitle": "Club",
"mDataProp": "playerClub"
},{
"sTitle": "Value",
"mDataProp": "playerValue"
},{
"sTitle": "Points",
"mDataProp": "playerPoints"
}];
var table = null;
$("#playersFilter").change(function () {
var value = $('#playersFilter').val();
if (value == "gk") {
if ($.fn.dataTable.isDataTable('#players')) {
$('#players').DataTable().destroy();
}
table = $('#players').DataTable({
"aaData": goalkepeers,
"iDisplayLength": 15,
"aoColumns": aoColumns,
"bRetrieve": true,
"order": [
[3, "desc"]
],
"bDestroy": true
});
} else if (value == "def") {
if ($.fn.dataTable.isDataTable('#players')) {
$('#players').DataTable().destroy();
}
table = $('#players').DataTable({
"aaData": defenders,
"iDisplayLength": 15,
"aoColumns": aoColumns,
"bRetrieve": true,
"order": [
[3, "desc"]
],
"bDestroy": true,
});
}
});
I'm pretty sure there's a more efficient way of doing it, I'll have a think and post a link to a JSFiddle as a comment.
You only really need the one table as well:
<select id="playersFilter">
<option>Choose Players</option>
<option value="gk">goalkepeers</option>
<option value="def">Defenders</option>
</select>
<table class="display" id="players"></table>

use this code
if(user.position=="DEF"){
var table = $('#defDiv').DataTable({
"aaData":defenders,
"iDisplayLength":15,
"aoColumns": [
{ "mDataProp": "playerInfo" },
{ "mDataProp": "playerName" },
{ "mDataProp": "playerClub" },
{ "mDataProp": "playerValue" },
{ "mDataProp": "playerPoints" },
],
//EDITS
"bRetrieve":true,
"order": [[ 3, "desc" ]],
// use this in your code
"bDestroy": true,
});
}
this will work for me &
more details

Can you just destroy the table prior to re-initialization?
table.DataTable().destroy();
Something like this:
var table;
if ($.fn.dataTable.isDataTable('#defDiv')) {
table.DataTable().destroy();
}
table = $('#defDiv').DataTable({...
Documentation can be found here
Demo here

Colours disappear after resort jqGrid

When css attributes are set during initialization it works fine, colours and backgrounds in cells also change when initiated from a function. But when I sort the columns all colours set from function disappear and go back to the normal grid.
<script>
var Mydata =[
{
"id":"560058",
"nm" : "L 41971",
"temp" : "21.2",
"ignition" : "off",
"pos_x" : "55.2024832",
"pos_y" : "24.9640256",
"drv" : "",
"pos_s" : "0",
"param24" : "0",
"param240" : "0",
"pwr_ext" : "12.825"
},
{
"id":"560059",
"nm" : "L 41972",
"temp" : "21.2",
"ignition" : "off",
"pos_x" : "55.2024832",
"pos_y" : "24.9640256",
"drv" : "",
"pos_s" : "0",
"param24" : "0",
"param240" : "0",
"pwr_ext" : "12.825"
}
];
var grid = $("#live_view");
grid.jqGrid({
height: '100%',
width: '700',
datatype: "local",
loadonce: true,
data : Mydata,
gridview: true,
colNames: ['Name', 'Temperature', 'Ignition', 'lat', 'lon', 'Driver', 'Speed', 'param24', 'movement', 'pwr_ext'],
colModel:[
{name:'nm',index:'nm'},
{name:'temp',index:'temp'},
{name:'ignition',index:'ignition'},
{name:'pos_x',index:'pos_x'},
{name:'pos_y',index:'pos_y'},
{name:'drv',index:'drv'},
{name:'pos_s',index:'pos_s'},
{name:'param24',index:'param24'},
{name:'param240',index:'param240'},
{name:'pwr_ext',index:'pwr_ext'},
],
rowNum:100,
rowList:[100,200,300],
pager: '#pager2',
sortname: 'param240',
viewrecords: true,
sortorder: "desc",
caption:"Vertex Live View",
loadComplete: function() {
grid.jqGrid('setCell',"560058","nm","",color:'red'});
},
});
$("#live_view").jqGrid('navGrid','#pager2',{edit:false,add:false,del:false});
$("#cc").click(function (){
$("#live_view").jqGrid('setCell',"560058","nm","",{color:'blue'});
})
</script>
Change Colour

When you sort, it recreates the html. For all jqgrid knows, the column you modified might not even be visible on the current page after sorting. Bottomline, you will need to reapply the colours.
You could peruse the jqGrid api, to see if they allow setting the colour of the cell from the model data. I don't think so though.

Creating a Dynamic Grid with ExtJS

I'm trying to make a Dynamic Grid class (where I do not know any information about the columns but they are given from the json response and the gird prepares itself accordingly). Here I have found exactly what I was looking for however it gives me an error:
me.model is undefined
me.setProxy(me.proxy || me.model.getProxy());
ext-all-debug.js (line 47323)
I have tried to add both proxy and model but I was not successful, I kept getting the same error.
Here is the ExtJS code that I'm working on:
// ExtJS 4.1
Ext.Loader.setConfig({
enabled: true
});
Ext.Loader.setPath('Ext.ux', '../extjs-4.1.0/examples/ux');
Ext.require([
'Ext.grid.*',
'Ext.data.*', ]);
Ext.define('DynamicGrid', {
extend: 'Ext.grid.GridPanel',
storeUrl: '',
enableColumnHide: true,
initComponent: function () {
var store = new Ext.data.Store({
url: this.storeUrl,
reader: new Ext.data.JsonReader(),
autoLoad: true,
scope: this,
listeners: {
scope: this,
metachange: function (store, meta) {
if (typeof (store.reader.jsonData.columns) === 'object') {
var columns = [];
/**
* Adding RowNumberer or setting selection model as CheckboxSelectionModel
* We need to add them before other columns to display first
*/
if (this.rowNumberer) {
columns.push(new Ext.grid.RowNumberer());
}
if (this.checkboxSelModel) {
columns.push(new Ext.grid.CheckboxSelectionModel());
}
Ext.each(store.reader.jsonData.columns, function (column) {
columns.push(column);
}); // Set column model configuration
this.getColumnModel().setConfig(columns);
this.reconfigure(store, this.getColumnModel());
}
}
}
});
var config = {
title: 'Dynamic Columns',
viewConfig: {
emptyText: 'No rows to display'
},
loadMask: true,
border: false,
stripeRows: true,
store: store,
columns: []
}
Ext.apply(this, config);
Ext.apply(this.initialConfig, config);
DynamicGrid.superclass.initComponent.apply(this, arguments);
},
onRender: function (ct, position) {
this.colModel.defaultSortable = true;
DynamicGrid.superclass.onRender.call(this, ct, position);
}
});
Ext.onReady(function () {
Ext.QuickTips.init();
var grid = Ext.create('DynamicGrid', {
storeUrl: 'http://300.79.103.188/ApplicationJs/jsontest.json'
});
var depV = Ext.create('Ext.Viewport', {
title: 'Departman Tanımları',
layout: 'fit',
items: grid
}).show();
});
What I have to do inorder to make it run?

That is a pretty old post so you may have more workarounds coming soon, but that error is because you do not have a model config or fields config defined for your store. The model will also need to be defined dynamically if you want your grid created with json data alone.
As far as I know, the fields config is pretty forgiving, so you may be able to just set this with a maximum possible number of fields like 20 or 30 or so, but the field names would have to match with the json field names for it to be usable. I.e. if you use:
var store = new Ext.data.Store({
url: this.storeUrl,
reader: new Ext.data.JsonReader(),
fields: [
'column1',
'column2',
'column3',
'column4',
'column5',
// etc
],
Then your json data would need to come from the database like:
[{"column1":"data1", "column2":"data2", // etc
Another thing I've done in the past is to have a reference store loaded first which contained a record with the name and datatype for each of the dynamic fields (meta data). Then I iterated through this reference store and added a model field and the column definition at each iteration, then I loaded the grid's store which now had the correct data model defined and the grid would have the correct column defintion.
You may have do something like that if you don't want to make your database return generic column names as covered above, because I don't know how you will load the data into your grid store initially before you give it a data model to use.
UPDATE 13 Jun:
I haven't tried it yet, but I just came across this in the 4.1 docs (scroll down to the "Response MetaData" section in the intro). It describes using metaData in your json response to accomplish exactly what you are going for with a dynamic model and grid columns.
You would probably still have to do the iteration I described above once you process the metaData, but you can use it to cut out that additional request to get the meta data.
I suppose if your field configuration doesn't change with each request then it would be easier to simply to do the extra request at the beginning, but if you want something really dynamic this would do it.

NOTE : This is a duplicte to my response here : How do you create table columns and fields from json? (Dynamic Grid) . I just wanted address my final solution in all of the StackOverflow questions I used to solve this problem.
Stackoverflow is littered with questions very similar to this one. I worked through them all and did not find a definitive solution. However, most of the provided answers pointed me in the right direction. I'll give me best shot at putting all those suggestions together and making this clear for others:
Model: (Only shows 2 fields that will be in all JSON responses. Will still be overwritten)
Ext.define('RTS.model.TestsModel', {
extend: 'Ext.data.Model',
alias: 'model.TestsModel',
fields: [
{
name: 'poll_date'
},
{
name: 'poller'
}
]
});
Store:
Ext.define('RTS.store.TestsStore', {
extend: 'Ext.data.Store',
alias: 'store.TestsStore',
model: 'RTS.model.TestsModel',
constructor: function(cfg) {
var me = this;
cfg = cfg || {};
me.callParent([Ext.apply({
autoLoad: false,
proxy : {
type : 'ajax',
url : 'tests.php',
reader : {
type : 'json',
root : 'tests',
successProperty : 'success'
}
},
storeId: 'tests-store'
}, cfg)]);
}
});
View: (The columns will be defined in each JSON response)
Ext.define('RTS.view.TestsView', {
extend: 'Ext.grid.Panel',
alias: 'widget.TestsView',
id: 'tests-view',
title: 'Tests',
emptyText: '',
store: 'TestsStore',
initComponent: function() {
var me = this;
Ext.applyIf(me, {
viewConfig: {
},
columns: [
]
});
me.callParent(arguments);
}
});
Controller: (The controller does all the work in forcing the view and model to change based on the JSON response).
Ext.define('RTS.controller.TestsController', {
extend: 'Ext.app.Controller',
alias: 'controller.TestsController',
stores: [
'TestsStore'
],
models: [
'TestsModel'
],
views: [
'TestsView'
],
init: function(application) {
// When store changes, trigger an event on grid
// to be handled in 'this.control'.
// NOTE : Ext JS does not allow control of
// non-component events.
// Ext JS 4.2 beta will allow the controller
// to detect non-component changes and handle them
var testsStore = this.getStore('TestsStore');
testsStore.on("metachange", metaChanged, this);
function metaChanged(store, meta) {
var grid = Ext.ComponentQuery.query('TestsView')[0];
grid.fireEvent('metaChanged', store, meta);
};
this.control({
"TestsView": {
metaChanged: this.handleStoreMetaChange
}
});
},
/**
* Will update the model with the metaData and
* will reconfigure the grid to use the
* new model and columns.
*/
handleStoreMetaChange: function(store, meta) {
var testsGrids = Ext.ComponentQuery.query('TestsView')[0];
testsGrids.reconfigure(store, meta.columns);
}
});
JSON Response:
Your json response must have the "metaData" property included. It should define the fields just as you would on a static model and the view that would normally be defined to show the fields.
{
"success": true,
"msg": "",
"metaData": {
"fields": [
{
"name": "poller"
},
{
"name": "poll_date"
},
{
"name": "PING",
"type": "int"
},
{
"name": "SNMP",
"type": "int"
},
{
"name": "TELNET",
"type": "int"
},
{
"name": "SSH",
"type": "int"
},
{
"name": "all_passed"
}
],
"columns": [
{
"dataIndex": "poller",
"flex": 1,
"sortable": false,
"hideable": false,
"text": "Poller"
},
{
"dataIndex": "poll_date",
"flex": 1,
"sortable": false,
"hideable": false,
"text": "Poll Date"
},
{
"dataIndex": "PING",
"flex": 1,
"sortable": false,
"hideable": false,
"text": "PING",
"renderer": "RenderFailedTests"
},
{
"dataIndex": "SNMP",
"flex": 1,
"sortable": false,
"hideable": false,
"text": "SNMP",
"renderer": "RenderFailedTests"
},
{
"dataIndex": "TELNET",
"flex": 1,
"sortable": false,
"hideable": false,
"text": "TELNET",
"renderer": "RenderFailedTests"
},
{
"dataIndex": "SSH",
"flex": 1,
"sortable": false,
"hideable": false,
"text": "SSH",
"renderer": "RenderFailedTests"
},
{
"dataIndex": "all_passed",
"flex": 1,
"sortable": false,
"hideable": false,
"text": "All Passed",
"renderer": "RenderFailedTests"
}
]
},
"tests": [
{
"poller": "CHI",
"poll_date": "2013-03-06",
"PING": "1",
"SNMP": "0",
"TELNET": "1",
"SSH": "0",
"all_passed": "0"
},
{
"poller": "DAL",
"poll_date": "2013-03-06",
"PING": "1",
"SNMP": "0",
"TELNET": "1",
"SSH": "0",
"all_passed": "0"
},
{
"poller": "CHI",
"poll_date": "2013-03-04",
"PING": "1",
"SNMP": "0",
"TELNET": "1",
"SSH": "0",
"all_passed": "0"
},
{
"poller": "DAL",
"poll_date": "2013-03-04",
"PING": "1",
"SNMP": "0",
"TELNET": "1",
"SSH": "0",
"all_passed": "0"
},
{
"poller": "CHI",
"poll_date": "2013-03-01",
"PING": "1",
"SNMP": "0",
"TELNET": "1",
"SSH": "0",
"all_passed": "0"
}
]
}