- basic useage
<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
"display" : "none"
});
- hide the drop-down list to show page size
"display" : "none"
});
No comments:
Post a Comment