beginerdeveloper beginerdeveloper - 5 months ago 494
Javascript Question

Using datatable with node.js

I am trying to use jquery Datatable with Node.js.
Here is my Code HTML

<button id="btnSearch" type="submit" class="btn btn-responsive"><i class="icon-search"></i>&nbsp;Search</button>

<div class="box-body table-responsive no-padding">
<div id="tableContainer">
<table class="table table-hover" id="dataTables1">
<thead>
<tr>
<th class="text-left">base</th>
<th class="text-left">base1</th>
</tr>
</thead>
<tbody></tbody>
</table>
</div>
<div class="text-center">
<img id="loading-image" src="../dist/img/loading_spinner.gif" style="display: none;" />
</div>
</div>


Here is script code

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
$("#btnSearch").click(function () {
RefreshTable("#dataTables1");
});

function RefreshTable(tableId) {

table = $(tableId).dataTable();
table._fnClearTable(table.oSettings);
table.fnDestroy();
table.fnDraw(true);
var table2 = $(tableId).dataTable({
"bServerSide": true,
"bProcessing": true,
"responsive": true,
"bAutoWidth": false,
oLanguage: {
sProcessing: "<img src='../dist/img/loading_spinner.gif'/>"
},
"aLengthMenu": [10, 30, 50, 100],
"pageLength": 30,
"sAjaxSource": 'http://127.0.0.1:3000/statistic?schemename=abc',
"fnServerData": function (sSource, aoData, fnCallback) {
$.ajax({
"dataType": 'json',
"type": "POST",
"url": sSource,
"data": aoData,
"success": fnCallback
});
},
"sDom": "<'row-fluid'<'span6'l><'span6'f>r>t<'row-fluid'<'dataTables_wrapper'ip>>",
"sPaginationType": "full_numbers",//"full_numbers",
"aoColumns": [
{ "sName": "base", "bSortable": false },//0
{ "sName": "base1", "bSortable": false }
]
});
}
</script>


And here is my code server side node js

var async = require('async'),
QueryBuilder = require('datatable');

var tableDefinition = {
sTableName: 'Orgs'
};

var queryBuilder = new QueryBuilder(tableDefinition);

// requestQuery is normally provided by the DataTables AJAX call
var requestQuery = {
iDisplayStart: 0,
iDisplayLength: 5
};

// Build an object of SQL statements
var queries = queryBuilder.buildQuery(requestQuery);

exports.test = function(req, res){
console.log(req.query.schemename);

userExport.getUserEdit(req.query.schemename, function(rows){
res.json(queryBuilder.parseResponse(rows));
})
}


When i clicked in the search button then in the server side i recieved schemename is 'abc' and got the user but i can't response the json to table. In the tab console of browser i got a error :
jquery.dataTables.js:4108 Uncaught TypeError: Cannot read property 'length' of undefined, anyone help me out of this error or suggest me a solution to fix this problem thank for adventure

Answer

Add sAjaxDataProp: 'data' to your initialization params :

var table2 = $(tableId).dataTable({
  ...
  sAjaxDataProp: 'data',
  sAjaxSource: 'http://127.0.0.1:3000/statistic?schemename=abc',
  ...
})

Reason: When using sAjaxSource, dataTables 1.9.x expect data to be in the format { "aaData" : [...] }, thats why you get the Uncaught TypeError: Cannot read property 'length' of undefined. However, node-datatable exports the rows as { "data" : [...] }.

Comments