We Keep Coding

DataTables warning: table id=tbl_new- Ajax error after adding serverSide: true,

var table = $('#canidateregtable').DataTable();
table.destroy();
$('#canidateregtable').DataTable( {
serverSide: true,
"ajax": {
"url" : "getdata",
"dataSrc" : "",
},
});
This is my datatable and some column like
"columns": [
{"data": "user_id",}
]
Why this error can anyone help me and this is in live in server

Setting attribute of Datatable differs from version of datatable js you are using.
If you are using Datatable version of greater than 1.10.0 use below syntax.
$('#canidateregtable').DataTable({
"sAjaxSource": "/GetData", // Your url
"bServerSide": true,
"bSearchable": true,
"order": [[1, 'asc']],
"columns": [
// You can mention here all your columns you want to display
{
"data": "Name",
}
]
});
}

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

How to remove the next/previous tabs after the jQuery dataTable initialized from jSON?

A jQuery table is initialized from jSON
I know that it will be only one row, so I do not need to show the next/previous tabs after the table. Nevertheless they are displayed.
Is there any way of removing them?
The code for the table:
table = $("#retrievedTable").dataTable({
"bServerSide" : true,
"sAjaxSource" : "/cm/credit/getretrievedTable.json",
"fnServerParams": function ( aoData ) {
aoData.push( { "name": "orderNumber", "value": $( "#orderNumberInput" ).val() } );
},
"bProcessing" : true,
"bInfo" : false,
"bRetrieve" : true,
"bDestroy" : true,
"bAutoWidth": false,
"bLengthChange": false,
"iDisplayLength": 20,
"aoColumnDefs": [{
"mRender": function ( data, type, row ) {
return moment(data).format("MM/DD/YYYY");
},
"aTargets": [ 0 ],
"bPaginate": false
}]
});

The only answer I can come up with is to hide it instead of removing it. You can do this by adding this to your css:
.dataTables_paginate {
display: none;
}
I've tried it with the example on the website. The css class was found on this page.

jQuery datatable - fnReloadAjax does not override sAjaxSource

I have the following code which shows all rows by default and when clicking the .view-unread-rows button the datatable should only show unread rows. However, it does not appear to be running the reload query.
$(".view-unread-rows").click( function(e) {
e.preventDefault();
message_table.fnReloadAjax("/letters/ajax/T");
message_table.fnDraw();
});
$(".view-all-rows").click( function(e) {
e.preventDefault();
message_table.fnReloadAjax("/letters/ajax/F");
message_table.fnDraw();
});
message_table = $('.message_table').dataTable({
"sPaginationType": "bootstrap",
"iDisplayLength": 10,
"iDisplayStart": 0,
"bProcessing": true,
"bServerSide": true,
"sServerMethod": "POST",
"sAjaxSource": "/letters/ajax/F",
"sDom": '<"top">rt<"bottom"><"clear">',
"aaSorting": [[3, 'desc']],
"aoColumns": [
{ "bSortable": false },
{ "bSortable": true },
{ "bSortable": false },
{ "bSortable": true }
],
"oLanguage": {
"sEmptyTable": "No results"
}
});
I have had this working but I've changed something at some point and it's now stopped. Any ideas?
EDIT:
OK, oddly enough, this seems to work fine if there are no results for clicking on .view-unread-rows.
Still no clue though.

$(this).on('click', '.view-unread-rows', function(e) { ...

Datatables : disable first next previous last and show / search record when processing

I am using Datatables 1.9 version
var oTable = $('#example').dataTable( {
"oLanguage": {"sSearch": "Search all columns:",
"sLengthMenu": "Display <select><option value='100'>100</option><option value='200'>200</option></select> records per page"
},
"sPaginationType": "full_numbers",
"bAutoWidth": false,
"iDisplayStart": 0,
"iDisplayLength": 2000,
"bFilter": true,
"bInfo": true,
"bSort": true,
"sScrollX": "100%",
"sScrollY": "500px",
"bScrollCollapse": true,
"bPaginate": true,
"bSortClasses": true,
"bLengthChange": true,
"bProcessing": true,
"bDestroy": true,
"bServerSide": true,
"bDeferRender": true,
"fnServerParams": function ( aoData ) {
aoData.push( { "name": "form_data", "value": data } );
},
"sAjaxSource": "search.py",
"fnServerData": function ( sSource, aoData, fnCallback ) {
$.ajax( {
"dataType": 'json',
"type": "POST",
"url": sSource,
"data": aoData,
"success": function (json)
{
fnCallback(json);
$('html, body').animate({scrollTop:$(document).height()}, 'slow');
document.getElementById("bottom").focus();
},
"error": function (xhr, error, thrown) {
alert("An Error Occurred.!");
}
});
The issue is that when I run the search and datatables renders "Processing ..." text the "Show .. Search" and first next previous and last button also gets displayed. Is there a way that I defer there display when datatabales has processed or received response from backend.

You should include "bPaginate": false, into the configuration object you pass to your constructor parameters.
As seen here.
as it is data table

I didn't understand your question completly. If you want to hide those controlls you may try this..
Datatables comes with controls for filtering and pagination. These can be shown and hidden in a couple of ways (all examples in coffeescript):
Way 1
$("#myTable").dataTable
"bPaginate": false, #hide pagination control
"bFilter": false #hide filter control
Way 2: Use the "sDom" prop
$("#myTable").dataTable
"aaData": data
"sDom": 'ft'
Here 'f' means filter and 't' means table, so only show those. Order matters: 'ft' puts
the filter on top, whereas 'tf' will put it on bottom.
For more complex and other widgets, see Ref
Ref: http://datatables.net/usage/options#sDom
I got the answer from this link : https://gist.github.com/1568446

//Hide DataTables Length
<style>.dataTables_length {
display: none;
}
</style> //Hide Pagination
<style>.pagination {
display: none;
}
</style> //Hide DataTables Info
<style>.dataTables_info {
display: none;
}
</style>
This will work,but i am not recommending this

Note that this answer is consistent with version DataTables 1.13.1
This is all set with the arguments object given to initialize the table
const myTable = $('#example').dataTable( args );
To avoid Next / Previous / First / Last buttons on pagination:
const args = {pagingType: "numbers"};
Find here the 6 choices available for pagingType property
To show/hide the searching box:
const args = {searching: true/false};
I hope this helps