How to add a checkbox column for an ajax source with sorting
How to add a checkbox column for an ajax source with sorting
SmurfTheWeb
Posts: 1Questions: 0Answers: 0
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.
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.
This discussion has been closed.
Replies
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 !