We Keep Coding

JQuery Datatable Refresh - Unable to receive parameter value on MVC controller side

Trying to pass some parameters in JQuery Datatables, its working fine on init.
But when I try to refresh the datatable the values are received as empty on controller side.
Here is the code:
$("#SearchResultsTable").DataTable({
"processing": true,
"serverSide": true,
"bLengthChange": false,
"filter": false,
"pageLength": #Model.PageSize,
"orderMulti": false,
"ajax": {
"url": "/Request/SearchRequest",
"type": "POST",
"datatype": "json",
"data": {
"Date_To": document.getElementById("Date_To").value,
"Date_From": document.getElementById("Date_From").value
}
},
"columns": [
{ "data": "ABC", "name": "ABC", "autoWidth": true },
{ "data": "DEF", "name": "DEF", "autoWidth": true }
]
});
Refresh Datatable:
$("#Search_Btn").click(function () {
$("#SearchResultsTable").DataTable().clear();
$("#SearchResultsTable").DataTable().draw();
});
Also tried:
$("#Search_Btn").click(function () {
var table = $('#SearchResultsTable').DataTable();
table.ajax.reload();
});
I would like to refresh the table in such a way the updated vales of 'Date_To' & 'Date_From' are available on controller side.

You will need to pass the parameters via jquery datatable like below:
"data": function (data) {
data.Date_To = document.getElementById("Date_To").value;
data.Date_From = document.getElementById("Date_From").value;
}
Please take a look at the following tutorial for more details
https://www.codeproject.com/Articles/1170086/Grid-with-Server-Side-Advanced-Search-using-JQuery

JQuery Datable throwing error for valid "columns" option parameter

Ok so i have a jquery datatable which is structured like this
$(document).ready(function () {
var table = $('#tableContent').DataTable({
"processing": true,
"serverSide": true,
"filter": true,
"ajax": {
"url": "path/to/api",
"type": "POST",
"datatype": "json"
},
"columnDefs": [{
"searchable": false,
"orderable": false,
"targets": 0
}],
"columns": [
null,
{ "data": "data1", "name": "data1", "autoWidth": true },
{ "data": "data2", "name": "data2", "autoWidth": true },
{ "data": "data3", "name": "data3", "autoWidth": true },
{ "data": "data4", "name": "data4", "autoWidth": true },
{ "data": "data5", "name": "data5", "autoWidth": true },
{ "data": "data6", "name": "data6", "autoWidth": true },
{ "data": "data7", "name": "data7", "autoWidth": true }
],
"order": [[1, 'asc']]
});
table.on('order.dt search.dt page.dt', function () {
table.column(0, { search: 'applied', order: 'applied' }).nodes().each(function (cell, i) {
cell.innerHTML = i + 1;
});
}).draw();
});
<table class="tableWrapper" id="tableContent">
<thead>
<tr>
<th>#</th>
<th>data1</th>
<th>data2</th>
<th>data3</th>
<th>data4</th>
<th>data5</th>
<th>data6</th>
<th>data7</th>
</tr>
</thead>
<tbody>
</tbody>
<tfoot>
</tfoot>
</table>
Here is the JSON response to the Api being called
{
"draw":"1",
"recordsFiltered":48,
"recordsTotal":48,
"data":[
{
"data1":"XXXX",
"data2":"XXXX",
"data3":"XXXX",
"data4":"XXXX",
"data5":"XXXX",
"data6":"XXXX",
"data7":"XXXX"
}...
]
}
It throws this error :
"DataTables warning: table id=tableContent - Requested unknown parameter '0' for row 0, column 0. For more information about this error, please see http://datatables.net/tn/4" (Attached error message picture)
BUT! shortly after the error is thrown, the data loads in with no issues.
Replacing null with {data:null} seems to get rid of the error but it messes with my index column. What was supposed to be a sequence of 1,2,3,4... is now just a bunch of [object Object]
see image

There is more than one way to get what you want. Here is one way, which uses the internal DataTables index assigned to each row. This assignment is purely sequential: the first row added to the table (from the first data object in your JSON) is index 0 - and so on:
"columnDefs": [ {
"targets": 0,
"render": function ( data, type, row, meta ) {
return meta.row + 1;
}
} ]
You already have a targets: 0 in your sample, so adding in this should be straightforward.
The assigned index will stick to the row, when you sort and filter.
If you want an index which represents where the row is, visually, in the table - that is more complicated (and wouldn't be do-able using server-provided data, of course).

Datatable second page do not render

I am using Datatable to render a table. The code is -
var nextPage;
$(document).ready(function() {
$('#table').DataTable( {
"processing": true,
"ordering": false,
"serverSide": true,
"sorting":false,
"paging": true,
"pageLength":20,
"lengthChange" :false,
"pagingType":"simple",
"ajax": function (data, callback, settings) {
data.nextPage=document.getElementById("nextPage").value
$.ajax({url: "get/list", data: data, success: function(result){
document.getElementById("nextPage").value=result.nextPage;
callback(result);
}});
},
"columns": [
{ "data": "first_name" },
{ "data": "title" },
{ "data": "first_name" },
{ "data": "first_name" },
{ "data": "first_name" },
{ "data": "first_name" },
{ "data": "work_email" }
]
});
});
The first page loads fine when I open the page, but the second page keeps on loading. The /get/list API call succeeds for the second page but the data is not rendered on the browser and loading icon keeps on rotating.

Use datatable ajax response data to set custom label value

I have used server-side processing data table.
Here is my datatable configuration:
var table = $("#job-table").DataTable({
"ajax": {
"url": "<?php echo url('/getJobs');?>",
"type": "POST",
"data": function (d) {
d.connection = connectionArray,
d.company = companyArray,
d.type = typeArray
}
},
"processing": true,
"serverSide": true,
"columns": [
{ "data": "id" },
{ "data": "job_id" },
{ "data": "type" },
{ "data": "connection_id" },
{ "data": "company_id" },
{ "data": "message" },
{ "data": "total_completion_time" },
{ "data": "date" },
{ "data": "start_time" },
{ "data": "end_time" },
{ "data": "error_time" }
],
"info": false,
"searching": false,
"bLengthChange": false
});
In this datatable ajax response I have passed some another data which I am gonna use to set custom label value.
Right now, I am using same ajax call to set label value. There are two calls one is of datatable and another call for setting label. Both time I am calling same API. but want to know how can I avoid second ajax call?
Is there any way to use data-table ajax call response to set custom label value?

I do something similar. I used the dataFilter callback to handle it.
so given HTML:
<input id="txtOne"/>
<input id="txtTwo"/>
<table id="job-table" class="display"></table>
Serverside code is returning a JSON Serialized object that looks like:
{ ValueOne: "some data",
ValueTwo: "Some more data",
data: [array of data for the table] }
My table definition looks like (notice the dataFilter section):
var table = $("#job-table").DataTable({
"ajax": {
"url": "<?php echo url('/getJobs');?>",
"type": "POST",
"data": function (d) {
d.connection = connectionArray,
d.company = companyArray,
d.type = typeArray
},
// I added this section. It is called before the success callback
// You will have to figure out your parsing at this point because
// each configuration is different so I just put how mine is.
dataFilter: function(response){
var temp = JSON.parse(response);
$("#txtOne").val(temp.ValueOne);
$("#txtTwo").val(temp.ValueTwo);
return response;
}
},
"processing": true,
"serverSide": true,
"columns": [
{ "data": "id" },
{ "data": "job_id" },
{ "data": "type" },
{ "data": "connection_id" },
{ "data": "company_id" },
{ "data": "message" },
{ "data": "total_completion_time" },
{ "data": "date" },
{ "data": "start_time" },
{ "data": "end_time" },
{ "data": "error_time" }
],
"info": false,
"searching": false,
"bLengthChange": false
});

dataTables sorting column and loading page with no gamescore

I have a website page at http://communitychessclub.com/examine.php
The problem is clicking on a row function to load the game works only on table rows with valid game records. The table header table row has column titles not game records. So when I click on a table header table row, the column sorts as it should, but then tries to load a game, but it can't.
$("#cccr").on("click", "tr", function() {
window.location.href = 'basic.php?game=' + $(this).attr('game');
Can this be fixed? This is the complete script code:
$(document).ready(function() {
$('#cccr').DataTable({
"createdRow": function(row, data, index) {
$(row).attr('game', data.game);
},
"search": {
"search": "<?php echo ($_GET['player']); ?>"
},
"order": [
[0, "asc"]
],
"keepConditions": true,
"paging": true,
"deferRender": false,
"oSearch": {
"sSearch": "<?php echo ($_GET['player']); ?>"
},
"aaSorting": [],
"bPaginate": false,
"bLengthChange": true,
"bFilter": true,
"bSort": true,
"bInfo": true,
"sPaginationType": "numbers",
"responsive": true,
"bAutoWidth": true,
"autoWidth": true,
"stateSave": false,
"ajax": "assets/games.ajax",
"pageLength": 6,
"columns": [{
"data": "Date",
"width": "7rem",
}, {
"data": "Event"
}, {
"data": "ECO"
}, {
"data": "White"
}, {
"data": "WhiteElo"
}, {
"data": "Black"
}, {
"data": "BlackElo"
}, {
"data": "Result"
}, {
"data": "game",
visible: false
}]
});
$("#cccr").on("click", "tr", function() {
window.location.href = 'basic.php?game=' + $(this).attr('game');
});
});

Try this click function just table rows(tbody tr) not for table header row(thead tr). Actually, you just want click tr elements under the tbody element.
$("#cccr").on("click", "tbody tr", function() {
window.location.href = 'basic.php?game=' + $(this).attr('game');});