Develop Reference

jquery data table and sorting columns

I'm using jquery data table to display large amounts of data inside grid. I implemented server side pagination but I'm struggling with sorting data server side.
Below is my datatable initialization, answer with query for sorting is not the subject here, I just need a way to pass information of which column is clicked to the controller, the one upon I will do the sorting.
('#myTable').dataTable({
"processing": true,
"serverSide": true,
"info": false,
"pageLength": 10,
"lengthChange": false,
"stateSave": false,
"bPaginate": true,
"bFilter": false,
"sPaginationType": "full_numbers",
"info": "Page _PAGE_ from _PAGES_",
"infoEmpty": "No data",
"oPaginate": {
"sFirst": "First",
"sPrevious": "Previous",
"sNext": "Next",
"sLast": "Last"
},
"ajax": {
"url": "#string.Format("{0}://{1}{2}", Request.Url.Scheme, Request.Url.Authority, Url.Content("~"))/MyController/GetData",
"type": "GET",
"data": function (d) {
.....
},
},
preDrawCallback: function (settings) {
...
},
drawCallback: function (settings) {
...
},
"columns": [
{ "data": "Id" },
{ "data": "FirstName" },
{ "data": "LastName" },
{ "data": "Age" }
],
"columnDefs": [
{
targets: [0],
orderable: false
},
{
render: function (data, type, row) {
...
}
],
"order": [[0, "desc"]]
});
public ActionResult GetData(){
var sortColumn = ...
...
}

You can bind the 'order' event like this:
$('#myTable').on( 'order.dt', function () {
var order = table.order();
var column_selected = order[0][0];
var order_way= order[0][1];
doStuff(column_selected ,order_way);
});
See it in plugin reference

By specifying "serverSide": true,, datatables will by default add information to the request which you need to use in your server-side code. If you look in the Firebug Network panel, you will be able to see the request with the querystring parameters. See here for the full list of parameters. Note that the link is to the v1.9 documentation, because that's what it looks like you're using.
So for sorting, you'd be interested in iSortCol_0 and sSortDir_0 which relate to the clicked column and the sort direction respectively.
In your controller method, you would access the parameters like this:
var sortColumnIndex = Convert.ToInt32(Request["iSortCol_0"]);
var sortColumnDir = Request["sSortDir_0"];
You then need to incorporate this, and the other parameters into your query.
Here is an article on using server-side datatables with MVC

default sorting not working in jquery datatable on serverside processing?

Here is the js code that I use. I want to have column 2 sorted in descending order by default.
when I disable bserverside to be false, I get this working (but it does not show all the records when I click next page).
However, if I enable bserverside:true, I get the what I have shown below in the image. if I remove "aaSorting", but keep bserverside:true, it displays all records on pagination. but the records are not sorted and clicking the sort button on the column header does not sort. Moreover, sorting on other columns (which I have included in aocolumns) produce the same image. I cannot figure out what is going wrong. I spent entire weekend trying to figure this out. but have not made any progress yet
$(document).ready(function() {
var oTable = $('#search_table').dataTable( {
"sDom": 'T<"clear">lrtip',
"bProcessing": true,
//"bServerSide": true,
"sAjaxSource": "{% url 'search_list_json' %}",
"aaSorting": [ [2,"desc" ]],
"iDisplayLength":10,
"sPaginationType": "full_numbers",
"aoColumns": [
{ "sClass": "center", "sWidth": "15%","bSortable": false },
{ "sClass": "center", "sWidth": "5%","bSortable": true },
{ "sClass": "center", "sWidth": "5%","bSortable": true },
{ "sClass": "center", "sWidth": "5%" ,"bSortable": true },
{ "sClass": "center", "sWidth": "5%","bSortable": false}
]
} );
} );

Following code is working for me
$(document).ready(function() {
var dataTable = $('#employee_data').DataTable({
"processing": true,
"serverSide": true,
"aaSorting": [ [0,"desc" ]],
"ajax": {
url: "$urlOne",
type: "post",
error: function()
{
alert('error');
}
}
});

Uncaught TypeError: Object [object Object] has no method 'fnFilterClear'

I am getting this error in the console :
"Uncaught TypeError: Object [object Object] has no method 'fnFilterClear'"
My code :
$(document).ready(function () {
var selectedColumn = $('#columnlist').find(":selected").text();
$('#csearchtext').bind("change paste keyup", function () {
var input = $('#csearchtext').val();
var dropdownindex = $("select[name='columnlist'] option:selected").index();
console.log(dropdownindex);
$('#table_id').dataTable().fnFilter(input, dropdownindex + 1, false, true, true, false);
});
$('#columnlist').on('change', function () {
$('#table_id').dataTable().fnFilterClear();
});
$('#dblist').on('change', function () {
var selected = $('#dblist').find(":selected").text();
tablefill(selected);
});
$('#search').click(function () {
var selected = $('#dblist').find(":selected").text();
tablefill(selected);
});
function tablefill(selected) {
$('.advsearchbar').show();
$('#stable').show();
$('#table_id').dataTable({
"sAjaxSource": '/php/connect/searchtablequery.php',
"bProcessing": true,
"sScrollY": "500px",
"bDeferRender": true,
"bDestroy": true,
"sAjaxDataProp": "",
"fnServerParams": function (aoData) {
aoData.push({ "name": "db", "value": selected });
},
"aoColumns": [
{ "mData": "calldate" },
{ "mData": "recordingfile" },
{ "mData": "uniqueid" },
{ "mData": "src" },
{ "mData": "did" },
{ "mData": "lastapp" },
{ "mData": "dst" },
{ "mData": "disposition" },
{ "mData": "duration" },
{ "mData": "userfield" },
{ "mData": "accountcode"}],
"iDisplayLength": 20,
"bJQueryUI": true,
"sPaginationType": "full_numbers",
"sDom": '<"H"Tfr>t<"F"ip>',
"oTableTools": {
"sSwfPath": "/DataTables/extras/TableTools/media/swf/copy_csv_xls_pdf.swf",
"aButtons": [
"copy", "csv", "xls", "pdf",
{
"sExtends": "collection",
"sButtonText": "Save",
"aButtons": ["csv", "xls", "pdf"]
}]
}
});
}
});
The javascript is firing just fine but the one spot that triggers the fnfilterclear has that error prompted.

Look at http://datatables.net/plug-ins/api#how_to How to use Datatable Plug-in API. You have to include the function listed on that page to use the function.
To make use of one of the plug-in API functions below, you simply need to include it in the Javascript available for your page, after you load the DataTables library, but before you initialise the DataTable. After that, you will be able to initialise the table, and call the function on the resulting object.

Jquery DataTable Sorting Numeric value column not working properly

In my Asp.net app, I have a Gridview Control and bind it on code behind.
And on client side I use Jquery DataTable version 1.9.4 for better Sorting,Searching functionality, Here i got one problem Numeric value not sorting properly.
I googled and come to knw by using sType": "numeric" will solved, but when i use this my whole working stoped my Column is at 9 position so i set aTragets 9
Here's the JS FIDDLE
Javascript:
$(document).ready(function () {
$('#ctl00_ContentPlaceHolder1_GridView3').dataTable({
"bJQueryUI": true,
"sPaginationType": "full_numbers"
// "aoColumnDefs": [{ "sType": "numeric", "aTargets": [9] }]
});
});
Code nehind:
On Page_PreRender
if (GridView3.Rows.Count > 0)
{
GridView3.UseAccessibleHeader = true;
GridView3.HeaderRow.TableSection = TableRowSection.TableHeader;
}
On pageLoad :
GridView3.DataSource = sortedDT;
GridView3.DataBind();

I think aaSorting is what you have to use
$(document).ready(function () {
$('#ctl00_ContentPlaceHolder1_GridView3').dataTable({
"aaSorting": [[ 9, "asc"]], /*row count starts from 0 in datatables*/
"bJQueryUI": true,
"sPaginationType": "full_numbers"
// "aoColumnDefs": [{ "sType": "numeric", "aTargets": [9] }]
});
});
UPDATE
The problem was as stated in my comment It clearly does not understand the numeric datatype of the column. Your problem is that inside your ... you had also text.
See a working fiddle http://jsfiddle.net/6Pxwy/1

This is how i solved:
Gridview with Item template:
In Item template their might be label control, so it convert into span, we need to remove that span tag ie html tag using .contents().unwrap();
Code:
$("#Gridview_ID span").contents().unwrap();
$('#Gridview_ID ').dataTable({
"bJQueryUI": true,
"sPaginationType": "full_numbers",
"aoColumns": [{ "bSortable": false }, null, null, { "sType": "numeric" }, { "sType": "date" }, null, { "bSortable": false}]
});
Gridview with Bound Field:
$('#Gridview_ID ').dataTable({
"bJQueryUI": true,
"sPaginationType": "full_numbers",
"aoColumns": [{ "bSortable": false }, null, null, { "sType": "numeric" }, { "sType": "date" }, null, { "bSortable": false}]
});

DataTables: search all columns when server-side

I'm using IgnitedDatatables (CodeIgniter library) for DataTables. The table gets generated without problems but if I search/filter it can only filter one column at a time. If I set "bServerSide" to false it works but then I lose the server-side functionality.
In the examples, this one is working:
http://datatables.net/release-datatables/examples/ajax/custom_data_property.html
while this isn't (server-side):
http://datatables.net/release-datatables/examples/data_sources/server_side.html
Is this not possible to achieve when running server-side?
This is my JSON response (shortened and with replaced data):
{"sEcho":0,"iTotalRecords":45438,"iTotalDisplayRecords":45438,"aaData":[["abc","12345","example#example.com","","","2010-01-27 22:31:10","Edit<\/a> Delete<\/a>"],["abc2"," test123","test#test.com","","","2008-06-15 22:09:33","Edit<\/a> Delete<\/a>"]],"sColumns":"fname,lname,email,phone,cellphone,created,edit"}
JavaScript code:
$("#members").dataTable( {
"bProcessing": true,
"bServerSide": true,
'sAjaxSource': '<?php echo base_url();?>members/listener',
"fnServerData": function ( sSource, aoData, fnCallback ) {
$.ajax( {
"dataType": 'json',
"type": 'POST',
"url": sSource,
"data": aoData,
"success": fnCallback
} );
},
"bLengthChange": false,
"aaSorting": [[ 0, "asc" ]],
"iDisplayLength": 15,
"sPaginationType": "full_numbers",
"bAutoWidth": false,
"aoColumnDefs": [
{ "sName": "fname", "aTargets": [ 0 ] },
{ "sName": "lname", "aTargets": [ 1 ] },
{ "sName": "email", "aTargets": [ 2 ] },
{ "sName": "phone", "sWidth": "80px", "aTargets": [ 3 ] },
{ "sName": "cellphone", "sWidth": "100px", "aTargets": [ 4 ] },
{ "sName": "created", "sWidth": "120px", "aTargets": [ 5 ] },
{ "bSortable": false, "sName": "edit", "sWidth": "115px", "aTargets": [ 6 ] }
]
});
Thank you!

Well, the problem if you filter server side is that you are filtering through an SQL query and this is what is written on the example you posted;
Filtering
NOTE this does not match the built-in DataTables filtering which does it
word by word on any field. It's possible to do here, but concerned about efficiency
on very large tables, and MySQL's regex functionality is very limited
Basically you could do what you want to do (a regular expression match an all columns) but it's going to kill the performance server side.
What i usually do is provide a filter for each column, i need to filter.