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",
}
]
});
}

Data table not working and not filter data

I have used data table code, but where I used search filter table getting code error.
if($("#newuser").length != 0) {
var oTable = $("#newuser").DataTable({
"processing": true,
"serverSide": true,
"ajax": {
"url": base_url+'users/listing',
"type": "POST",
},
"columnDefs": [{ orderable: false, targets: [0] }],
"order": [[6, "desc" ]],
});
$('#newuser').on( 'draw.dt', function () {
$('[data-plugin="switchery"]').each(function (idx, obj) {
new Switchery($(this)[0], $(this).data());
});
});
}

change this part
"url": base_url+'users/listing',
into this
"url": "<?php echo base_url('users/listing'); ?>",
***do not forget that base_url is from PHP

Datatable not apply on dynamically created table using MVC

I am having issue with datatable in mvc application mvc has one common layout that is master page (Layout Page)
I have implement datatable commonly in master page (Layout page) that apply to all child pages
now , I am stuck with one challenge that is some tables are created dynamically on comobo box selection
Layout Page
$('.table').DataTable({
"aoColumnDefs": [
{
bSortable: false,
aTargets: [-1], /* 1st one, start by the right */
"defaultContent": "",
}
],
"fixedHeader": true,
"lengthChange": false,
"bPaginate": false,
"responsive": true,
"autoWidth": false,
"scrollY": "300px",
"scrollCollapse": true,
"paging": false,
initComplete: function (settings, json) {
this.api().columns().header().each(function (th) {
$(th).removeClass("sorting_asc");
$(th).removeClass("sorting");
}
)
},
});
Child (Partial View)
<div class="row">
<div class="col-md-12">
<br />
<div id="example"></div>
</div>
</div>
function GetEmails() {
var tbl = $('#example');
$.ajax({
url: '/test/GetTestData',
contentType: 'application/html ; charset:utf-8',
type: 'GET',
dataType: 'html'
}).success(function (result) {
tbl.empty().append(result);
}).error(function (result) {
alert("Fail");
});
}
Now , I have issue that
tbl.empty().append(result);
after append table in div , datatable not apply on this table, I am wondering that how can I able to notify in Layout page that table is append in child page
Let me know , there is any event in javascript or jquery that fire after append or something ??
Thanks in advance

Try this,
Its working
function ApplyDataTable()
{
$('#example').bind('DOMNodeInserted', function (event) {
if (event.type == 'DOMNodeInserted')
{
//Datatable for search and sorting
$(currntTable).DataTable({
"aoColumnDefs": [
{
bSortable: false,
aTargets: [-1], /* 1st one, start by the right */
"defaultContent": "",
}
],
"fixedHeader": true,
"lengthChange": false,
"bPaginate": false,
"responsive": true,
"autoWidth": false,
"scrollY": "300px",
"scrollCollapse": true,
"paging": false,
});
}
});
}

You can initialize datatable in success of ajax something like this,
$('.Table').DataTable();
But if you really want to add the datatable from layout only, then this should be helpful
$(document).ajaxComplete(function (event, xhr, settings) {
$('.Table').DataTable();
});

Jquery.Datatable.js is taking time to render the records

I have a MVC application and I am fetching 5000 records from the database and returns in the JSOn format format in the action and rendering a Jquery.DataTable.js version 1.9.0 grid. The application is returning the data with no delay but it is taking time to render in the grid. Below is the code
$.ajax({
url: "http://locationhost/Mycontroller/myacton", type: "Get", contentType: "application/json; charset=utf-8",
data: { 'param': param1, 'param2': param2, },
dataType: "json",
success: function (data) {
$('#DisableDiv').html("");
var items = '';
var rows = '';
$('#divGrid').DataTable().fnClearTable();
$('#divGrid').DataTable().fnDestroy();
if (data.length > 0) {
$.each(data, function (i, item) {
rows = "<tr>........records......</tr>"
$('#divGrid tbody').append(rows);
});
table = $('#divGrid').DataTable({
"aoColumnDefs": [
{
'bSortable': false,
'aTargets': [0, 8],
}],
"aoColumns": [{ "bSortable": false }, null, null, null, null, null, { "sType": "currency" }, null, { "bSortable": false }],
"bPaginate": true,
"bInfo": true,
"bFilter": false,
"bLengthChange": true,
"sPaginationType": "full_numbers",
"iDisplayLength": 10
});
table.fnSort([[7, 'desc']]);
}
else {
$('#DisableDiv').html("No data available.");
$("#btnDownload").attr("href", "#");
}
}
},
error: function (data) {
$('#DisableDiv').html("");
}
});

Server-side processing is best because when you render a large no of data set records client side
it makes it slow if you want to see please follow below links in that case
http://datatables.net/usage/server-side
example (http://datatables.net/release-datatables/examples/data_sources/server_side.html).

DataTables TableTools export buttons not working

Using the code below, I can get the TableTools buttons to show up on the page, style correctly, and even change the mouse icon on the mouseover event, however the export function is not working. When I click on the button, nothing happens. Don't even get an error message.
The DataTable the TableTools plugin is working on does not exist on the page prior to the user hitting a "Search" button. Once this is done an Ajax call will pull the relevant data and create the DataTable. Again, this part of the program works fine, however when I click on the "Export" buttons (CSV, Excel, PDF)... nothing happens.
jQuery
$.ajax({
type: 'GET',
url: '#Url.Action("PensgcReport", "Home")',
data: { inputArray: inputArray },
traditional: true,
success: function (data) {
//Unpack return object into 2D array
var array = [];
$.each(data, function (key, value) {
var tempArray = [];
$.each(value, function(key, value) {
tempArray.push(value);
});
array.push(tempArray);
});
console.log(array);
$('#ReportTable').dataTable({
"bDestroy" : true,
"aaData": array,
"aoColumns": headers,
"bFilter": false,
"bPaginate": false,
"bLengthChange": false,
"bFilter": false,
"bSort": false,
"bInfo": false,
"aaSorting": [],
"oLanguage": {
"sSearch": "Filter results:"
},
"sDom": 'T<"clear">lfrtip',
"tableTools": {
"sSwfPath": "Content/media/copy_csv_xls_pdf.swf",
"aButtons":
[
{
'sExtends': 'csv',
"sFileName": "PENSGC_Report_" + new Date() + ".csv",
'mColumns': [0, 1]
},
{
'sExtends': 'xls',
"sFileName": "PENSGC_Report_" + new Date() + ".xls",
'mColumns': [0, 1]
},
{
'sExtends': 'pdf',
"sFileName": "PENSGC_Report_" + new Date() + ".pdf",
'mColumns': [0, 1]
},
]
}
});
}
})
HTML
This is the rendered HTML when the page loads (nothing special)
<table id="ReportTable" class="pretty">
</table>
Folder Structure

Change the swf path to:
"sSwfPath": "//cdn.datatables.net/tabletools/2.2.2/swf/copy_csv_xls_pdf.swf"

var table = $('#mytable').dataTable({ YOUR OPTIONS});
var tableTools = new $.fn.dataTable.TableTools(table, {
"buttons": ["copy",
"csv",
"xls",
"pdf",{ "type": "print", "buttonText": "Print me!" } ],
"sSwfPath": "//cdn.datatables.net/tabletools/2.2.2/swf/copy_csv_xls_pdf.swf" });
$(tableTools.fnContainer()).prependTo('#mytable_wrapper');