How to add a checkbox column for an ajax source with sorting

How to add a checkbox column for an ajax source with sorting

SmurfTheWebSmurfTheWeb Posts: 1Questions: 0Answers: 0
edited March 2013 in General
As this took me a while to figure out, thought I would share it here for the next poor soul. This will let you add a checkbox column to a datatable, that will still allow sorting, when using an ajax source. I found that the "dom-checkbox" method will not sort correctly when an ajax source is specified. The 10 second summary is use a source with named entries (or add an extra 'column'), and add a hidden column of 1/0 that you actually sort on.

Here is a simple example. I have an ajax data source like:
[code]
aaData = [
["name": "TestUser", "isvalid": 0],
["name": "TestUser2", "isvalid": 1]
]
[/code]

The table looks like
[code]

NameValidHiddenValid


[/code]

The javascript that pulls it all together:
[code]
$(document).ready(function() {
$("#test-table").dataTable({
"aoColumns": [
{ "sTitle": "Name", "mData": "name" },
{ "sTitle": "Valid", "mData": "isvalid", "iDataSort": 2, "bSearchable": false, "mRender": render_checkbox },
{ "sTitle": "HiddenValid", "mData": "isvalid", "bVisible": false }
],
"sAjaxSource": "REPLACE_WITH_YOUR_AJAX_SOURCE",
"bProcessing": true
});
});

function render_checkbox(data, type, full) {
var checked = "";
if (data == true) { "checked='true' };
return "";
}
[/code]

Setting up the ajax source is up to you.

Replies

  • jkejke Posts: 1Questions: 0Answers: 0
    edited May 2013
    Hello,

    Thanks for this tips !

    Just one little thing :

    [code]if (data == true) { "checked='true' };[/code]

    should be :

    [code]if (data == true) { checked = "checked='true'" };[/code]

    Thanks for your share !
This discussion has been closed.