Friday, January 25, 2013

jQuery datatables Tips


  • basic useage
1) add necessary js and css files

<script src="<c:url value='js/jquery-1.8.3.min.js'/>" /></script>
<script src="<c:url value='js/jquery-ui-1.10.0.custom.min.js'/>"></script>
<script src="<c:url value='js/jquery.dataTables.min.js'/>"></script>
<script src="<c:url value='js/jquery.dataTables.editable.js'/>"></script>
<link rel="stylesheet" href="css/jquery-ui-1.9.2.custom.css" media="all" />
<link rel="stylesheet" href="css/demo_page.css" />
<link rel="stylesheet" href="css/demo_table.css" />


2)
var oTable = $('#myDataTable').dataTable({
"bProcessing" : true,
"bDestroy" : true,
"sAjaxSource" : 'users.do',  // ajax to take the data
"sAjaxDataProp" : "",
//"bFilter":false,
"aoColumns" : [ {
"mData" : "userid"
}, {
"mData" : "password"
}, {
"mData" : "timeStamp"
} ],
"sPaginationType" : "full_numbers",
"aLengthMenu" : [ [ 4, 10, 20, -1 ], [ 4, 10, 20, "All" ] ],
"iDisplayLength" : 4
});

3)
<body id="dt_example">
<div id="container">

<table id="myDataTable" cellpadding="0" cellspacing="0" border="0"
class="display">
<thead>
<tr>
<th width="20%">userid</th>
<th width="20%">password</th>
<th width="20%">time</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</body>

4) why need to put "sAjaxDataDrop" as empty, because the data returned as follows,


[{"userid":"a1","password":"a","timeStamp":1359012297000,"checked":0},
{"userid":"abgh0","password":"dddd0","timeStamp":1359012165000,"checked":1},
{"userid":"abgh1","password":"dddd1","timeStamp":1359012165000,"checked":1},
{"userid":"abgh10","password":"dddd10","timeStamp":1359012165000,"checked":1}]

if the data returned looks like this,


["Demo":[{"userid":"a1","password":"a","timeStamp":1359012297000,"checked":0},
{"userid":"abgh0","password":"dddd0","timeStamp":1359012165000,"checked":1},
{"userid":"abgh1","password":"dddd1","timeStamp":1359012165000,"checked":1},
{"userid":"abgh10","password":"dddd10","timeStamp":1359012165000,"checked":1}]]

then need to configure 'sAjaxDataDrop' as 'Demo'


5) actual result on page:








  • make inline cells editable, show checkbox column, show delete column

oTable2 = $('#example').dataTable( {
      "bProcessing" : true,
      "sAjaxSource" : 'users.do',
       "sAjaxDataProp" : "",
       "bSort" : true,
        "bSearchable" : false,
        "aoColumns" : [
{
"sTitle" : "User ID",
"mData" : "userid"
},
{
"sTitle" : "Password",
"mData" : "password"
},
{
"sTitle" : "Date & Time",
"mData" : "timeStamp"
},
{
"mData" : "checked",
"fnRender" : function(obj) {
if (obj.aData.checked == "1")
return '<input type="checkbox" name="aCheckBox" class="dt_checked" checked value="'+obj.aData.checked+'\"/>';

return '<input type="checkbox" name="aCheckBox"  class="dt_checked" value="'+obj.aData.checked+'\"/>';
}
},
{
"mData" : null,
"sClass" : "center",
"sDefaultContent" : '<a href="" class="editor_remove" >Delete</a>'
} ],

//"sPaginationType" : "full_numbers",
"sPaginationType" : "two_button",
//"aLengthMenu" : [ [ 4, 10, 20, -1 ],
// [ 4, 10, 20, "All" ] ],
"iDisplayLength" : 10,
}).makeEditable({
sUpdateURL : "updateUser.do",
"aoColumns" : [ {}, null, null, null, null ]  // which means only first row is allowed to edit
});


1) use "fnRender" to show checkbox which is selected or not decided by data from server called by ajax

2) add delete link in each row
                   {
"mData" : null,
"sClass" : "center",
"sDefaultContent" : '<a href="" class="editor_remove" >Delete</a>'
}
3) .makeEditable() to make the cells editable, but we also can control which columns are allowed to edit

4) if click delete link, trigger this event to delete data in database.


$("a.editor_remove", oTable2).live("click", function(e) {
e.preventDefault();
var r = confirm("Do you want to delete this item?");
if (r == true) {

var nRow = $(this).parents('tr')[0];
var userid = nRow.cells[0].innerHTML;
$.ajax({
type : "POST",
url : "deleteUser.do",
data : {
"value" : userid
}
}).success(function(msg) {
oTable2.fnDeleteRow(nRow);
oTable2.fnDraw();
}).error(function(msg) {
alert(msg);
});
} else {

}

});


5) add event if checkbox status is changed


$("#example").on('change', 'input[type=checkbox]', function(e) {
var r = confirm("Do you want to change this item?");
if (r == true) {
var nRow = $(this).parents('tr')[0];
var userid = nRow.cells[0].innerHTML;
var oldchecked = $(nRow.cells[3].innerHTML).attr('value');

$.ajax({
type : "POST",
url : "updateUserStatus.do",
data : {
"userId" : userid,
"checked" : oldchecked
}
}).success(function(msg) {
oTable2.fnDraw(false);
}).error(function(msg) {
alert(msg);
});
} else {

}

});

6) actual result:










  • hide search box on the right-top corner
$(".dataTables_filter").css({
"display" : "none"
});
  • hide the drop-down list to show page size
$(".dataTables_length").css({
"display" : "none"
});

No comments:

Post a Comment