We Keep Coding

Datatable showing wrong page numbers

Following is the HTML code:
<table id="myTable" class="dTable1 contentList table table-bordered" style="z-index: 2; ">
<thead id="tableHeader">
<tr id="headerRow">
<th>Time</th>
<th>Event</th>
<th>Description</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
I am initializing the table on popup open using below JavaScript code:
showHistory = function (contentID) {
debugger;
var auditRes;
//var oTable = $('#AuditListtable').dataTable();
//oTable.fnDestroy();
//alert("outside");
$('#AuditListtable').dataTable({
"sAjaxSource":SERVERURL?contentId=' + contentID,
"aoColumns": [
{ "mData": "AccessDate" },
{
"mData": "EventDescription",
"bSortable": false
},
{
"mData": "IPAddress",
"bSortable": false,
"mRender": function (data, type, row) {
debugger;
return '<td> <span title="' + data + '">Played By: ' + row.FirstName + ', IP Address: ' + data + '</span></td>';
}
}
],
"paging": true,
"sDom": '<"top"p<"clear">>rt',
"sPaginationType": "full_numbers",
"searching": false,
"bFilter": false,
"processing": true,
"bServerSide": true,
"order":true,
"sServerMethod": "POST",
"bAutoWidth": false,
"iDisplayLength": 8
});
$('#historyPopup').modal('show');
}
The data will be populated in pop up. Currently we are having total 9 records but pagination is showing as 5 pages. After clicking on another page, it displays previous record. Table is not refreshed.

You've enabled server-side processing with "bServerSide": true. Most likely your response is incorrect.
If you indeed want server-side processing, your response should be something like:
{
"sEcho": 1,
"iTotalRecords": 9,
"iTotalDisplayRecords": 9,
"aaData": [
// ... skipped ...
]
}
where sEcho should have the value of sEcho parameter from the request, iTotalRecords is number of all records before the filtering, and iTotalDisplayRecords is number of all records after the filtering.
See server-side processing for more information.

How to make ajax request to mongodb

I am building an app using Meteor. I am using the jquery datatables package - www.datatables.net to present my data/records. According to the documentation, I would connect the table to my MongoDB database by:
$('#example').DataTable( {
serverSide: true,
ajax: '/data-source'
});
The part I am unclear of is the 3rd line - Can someone help me understand how to make an ajax call to return data from my MongoDB database?? Here is more documentation on server-side processing for datatables:
https://datatables.net/manual/server-side
I have a collection named Products with the fields description, brand, price.

<table id="example">
<thead id="dataTable-header">
<tr>
<th>ID</th>
<th>NAME</th>
</tr>
</thead>
</table>
var dataTable = $('#example').DataTable({
"orderable": false,
'searching': true,
"paging": true,
language: {
processing: "<i class='fa fa-refresh fa-spin'></i>"
},
"processing": true,
"serverSide": true,
"ajax": urlData,
"columns":[
{
"orderable": false,
"class": "details-control",
"data": null,
"defaultContent": ""
},
{"orderable": false, "data": "name" }
],
"columnDefs": [{
"targets": 3,
"render": function (data, type, row) {
return '<a name="editAnchor" class="fa fa-ban"></a>';
},
"className": 'text-center'
}]
});
urlData is your json data with fields Id and Name.

Ajax Error datatables.net/tn/7

I have a project created on PHP laravel, and I'm immplementig Ajax on all my options that have datatables, I was working fine but somehow my Ajax stop working and don't know why.
When I select and option on my web site with a Datatable shows the mesage:
Datatables warning: table id=example - Ajax error. For more
information aboute this error, please see http://datatables.net/tn/7
And don't show my content tables. When I select right click->inspect element show the mesage:
Failed to load resource: the server responded http://tienda.local.com/ajax/getJSONResultsForDT?table=tipos&primaryKey=id&…art=0&length=10&search%5Bvalue%5D=&search%5Bregex%5D=false&_=1423606401783
Network
Request URL:http://tienda.local.com/ajax/getJSONResultsForDT?table=tipos&primaryKey=id&draw=1&columns%5B0%5D%5Bdata%5D=id&columns%5B0%5D%5Bname%5D=&columns%5B0%5D%5Bsearchable%5D=true&columns%5B0%5D%5Borderable%5D=true&columns%5B0%5D%5Bsearch%5D%5Bvalue%5D=&columns%5B0%5D%5Bsearch%5D%5Bregex%5D=false&columns%5B1%5D%5Bdata%5D=clave_tipo&columns%5B1%5D%5Bname%5D=&columns%5B1%5D%5Bsearchable%5D=true&columns%5B1%5D%5Borderable%5D=true&columns%5B1%5D%5Bsearch%5D%5Bvalue%5D=&columns%5B1%5D%5Bsearch%5D%5Bregex%5D=false&columns%5B2%5D%5Bdata%5D=nombre_tipo&columns%5B2%5D%5Bname%5D=&columns%5B2%5D%5Bsearchable%5D=true&columns%5B2%5D%5Borderable%5D=true&columns%5B2%5D%5Bsearch%5D%5Bvalue%5D=&columns%5B2%5D%5Bsearch%5D%5Bregex%5D=false&columns%5B3%5D%5Bdata%5D=created_at&columns%5B3%5D%5Bname%5D=&columns%5B3%5D%5Bsearchable%5D=true&columns%5B3%5D%5Borderable%5D=true&columns%5B3%5D%5Bsearch%5D%5Bvalue%5D=&columns%5B3%5D%5Bsearch%5D%5Bregex%5D=false&columns%5B4%5D%5Bdata%5D=&columns%5B4%5D%5Bname%5D=&columns%5B4%5D%5Bsearchable%5D=true&columns%5B4%5D%5Borderable%5D=false&columns%5B4%5D%5Bsearch%5D%5Bvalue%5D=&columns%5B4%5D%5Bsearch%5D%5Bregex%5D=false&columns%5B5%5D%5Bdata%5D=&columns%5B5%5D%5Bname%5D=&columns%5B5%5D%5Bsearchable%5D=true&columns%5B5%5D%5Borderable%5D=false&columns%5B5%5D%5Bsearch%5D%5Bvalue%5D=&columns%5B5%5D%5Bsearch%5D%5Bregex%5D=false&order%5B0%5D%5Bcolumn%5D=3&order%5B0%5D%5Bdir%5D=desc&start=0&length=10&search%5Bvalue%5D=&search%5Bregex%5D=false&_=1423606554946
I don't know what is that bug.
This is my code:
<script type="text/javascript">
$(function () {
oDtable = $('#example').dataTable({
"scrollY": 300,
"order": [3, 'desc'],
"processing": true,
"serverSide": true,
"dom": 'T<"clear">lfrtip',
"tableTools": {
"sSwfPath": "/swf/copy_csv_xls_pdf.swf",
"aButtons": ["copy", "xls", "csv", "print"]
},
"ajax": "/ajax/getJSONResultsForDT?table=tipos&primaryKey=id",
"columns": [
{"data": "id"},
{"data": "clave_tipo"},
{"data": "nombre_tipo"},
{"data": "created_at"},
{"data": null},
{"data": null}
],
"columnDefs": [
{
"targets": [0],
"visible": false
},
{
"targets": [4],
"orderable": false,
"data": null,
"render": function (data, type, full, meta) {
return '<a data-toggle="modal" class="btn btn-info" href="tipos/' + data.id + '/edit" data-target="#myModal">EDITAR</a>';
}
},
{
"targets": [5],
"orderable": false,
"data": null,
"render": function (data, type, full, meta) {
var urlFormated = ''+data.nombre_tipo+'';
var encodedUrl = encodeURIComponent(urlFormated);
return '<a data-toggle="modal" class="btn btn-danger" href="/delete?id=' + data.id + '&nombre=tipos&nombretipo='+encodedUrl+'" data-target="#myModalDestroy">ELIMINAR</a>';
}
}],
"bPaginate": true,
"sPaginationType": "full_numbers",
"language": {
"url": "assets/js/DataTables-1.10.0/lang/" + "<?php echo $lang; ?>" + ".lang"
}
});
});
</script>
HTML
<table id="example" class="table table-bordered table-striped table-condensed">
<thead>
<tr>
<th>ID</th>
<th>CLAVE TIPO</th>
<th>NOMBRE TIPO</th>
<th>FECHA CREACION</th>
<th>EDITAR</th>
<th>ELIMINAR</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
Any help will be grateful!

Adding html.actionLink to Jquery Datatable

want to add HTML.actionlink to Jquery Datatable.
Am wokrking on this existing site made by someone else. For adding data they used Jquery Datatable with is new to me.
This is the data table:
this.oUserList = $('#UserList').dataTable({
"bLengthChange": false,
"bSort": true,
"bRetreive": true,
"bDestroy": true,
"aaSorting": [[0, "asc"]],
"bProcessing": true,
"sAjaxSource": "#Url.Action("GetUsers","Users")",
"sAjaxDataProp": "Result",
"aoColumns": [
{ "mDataProp": function(source, type, val) {
return source.FirstName + ' ' + source.LastName;
}, "bSortable": true },
{ (1st column },
{ 2ndcolumn},
{
3rd column
}, "bSortable": false },
{
4th column
}, "bSortable": false
},
{
5th column
}, "bSortable": false
},
Here is where i want to change it to action link
{ (6th)
"mDataProp": function (source, type, val) {
return M2.JsonDateToString(source.DateLastLogin);
}, "bSortable": false
},
My 6th column is a duplicate of the 5th, but what i need here is an action link, like this: (How i normally implement them):
<td>#Html.ActionLink("Edit Roles", "Edit", "Users", new { userName = "User\\" + u.UserName }, new { #class = "action" }) </td>
So what I want to no is how do you add a html actionLink to a Jquery Datatable.

Use the source json object to build the anchor:
this should work
{
"mDataProp": function (source, type, val) {
return 'Edit Roles'
}, "bSortable": false
},

Use this article www.codeproject.com/Articles/155422/jQuery-DataTables-and-ASP-NET-MVC-Integration-Part

javascript Datatable.js how to show value based on previous column

I am using datatables.js from datatables.net and trying to show a column based on prev col. Like if prev col has got value < 0 then Dr else CR.
I have tried the following script:
$(document).ready(function() {
var oTable = $('#transaction-list-results').dataTable( {
"bJQueryUI": true,
"sPaginationType": "full_numbers",
"bProcessing": true,
"sAjaxSource": "ajax/transactions.php",
"aaSorting": [[0, 'asc']],
"bAutoWidth": false,
"aoColumns": [
{ "mData": "ref_no", 'sWidth': '100px' },
{ "mData": "date", 'sWidth': '100px', "mRender": function(data, type, row){return localizeDateStr(data);}},
{ "mData": "desc", 'sWidth': '300px' },
{ "mData": "amount", 'sWidth': '75px', "sCalss": 'amount' },
{ "mData": "depo", 'sWidth': '75px', "mRender": function(data, type, row){return data;}},
{ "mData": "width", 'sWidth': '75px', "mRender": function(data, type, row){return data;}},
{ "mData": "transfer", 'sWidth': '75px', "mRender": function(data, type, row){return data;}}
]
} );
} );
Result of my transaction.php file:
{"aaData":[{"ref_no":"4345643532","date":"2012-10-09T17:36:28Z","desc":"Western Union","amount":-50,"depo":"","width":"","transfer":""},{"ref_no":"4324","date":"2012-10-09T17:28:06Z","desc":"123","amount":-10,"depo":"","width":"","transfer":""},{"ref_no":"4324","date":"2012-10-09T17:27:48Z","desc":"123","amount":3.45,"depo":"","width":"","transfer":""},{"ref_no":"123","date":"2012-10-05T20:56:11Z","desc":"abc","amount":10,"depo":"","width":"","transfer":""},{"ref_no":"12","date":"2012-10-01T16:47:19Z","desc":"autorefill","amount":2000,"depo":"","width":"","transfer":""}]}

So, you actually are already using some functions here that should help.
mRender will allow you render the data displayed in a particular column, defined in your aoColumns definition. You correctly have the three arguments labeled for the function:
data (the data for the cell, based on the mData key)
type
row (the dataset for the entire row)
So you can do something like this:
...
"mRender": function(data, type, row) {
var valueToCompare = row.someOtherCell
returnValue = data;
if (data > valueToCompare) { // or some similar logic
returnValue = somethingElse;
}
return returnValue;
}
...
Also, as a side note - you use mRender several times just to return data. That's not necessary if you're not manipulating the value - this is implicitly done through simply setting the mData property.