首先介绍一个学习datatables个人认为一个比较好的中文网站吧:http://datatables.club/
一:基本使用
1.添加js文件:table的修饰采用bootstrap
<link rel="stylesheet" href="../../../resources/gui/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="../../../resources/gui/plugins/datatables/dataTables.bootstrap.css" >
<script type="text/javascript" src="../../../resources/gui/scripts/jquery-2.1.4.js"></script>
<script type="text/javascript" src="../../../resources/gui/bootstrap/js/bootstrap.js"></script>
<script type="text/javascript" src="../../../resources/gui/plugins/datatables/jquery.dataTables.js"></script>
<script type="text/javascript" src="../../../resources/gui/plugins/datatables/dataTables.bootstrap.min.js"></script>
2.在页面中添加如下内容:这里采用接收服务端返回的数据
<table id="user-table" class="table table-bordered table-hover">
<thead>
<tr>
<th>name</th>
<th>userName</th>
<th>phone</th>
<th>email</th>
<th>roles</th>
<th>isActive</th>
<th>action</th>
</tr>
</thead>
</table>
3.在js文件中添加:
$('#user-table').DataTable({
"ajax": {
"url":'/user/loadAjax',
"dataSrc":function(result) {
return result;
}
},
"columnDefs": [ {
"targets": -1,
render: function(data, type, row, meta) {
return "<button οnclick=\"editUser("+row.id+")\" class=\"btn btn-success btn-sm\">"+
"<i class=\"fa fa-edit\"></i>"+
"</button>"+
"<button οnclick=\"deleteUser("+row.id+")\" class=\"btn btn-danger btn-sm\">"+
"<i class=\"fa fa-remove\"></i>"+
"</button>";
}
} ],
"columns":[
{"data":"name"},
{"data":"username"},
{"data":"phone"},
{"data":"email"},
{
"render": function(data,type,row,meta) {
var str = "";
for(var i=0;i<row.commRoles.length;i++) {
str+=(row.commRoles)[i].name+" ";
}
return str;
},
"orderable":false
},
{
"data":"activeInd",
"orderable":false
},
{
"data":null,
"orderable":false
}
],
"orderMulti":true
});
4.后台采用springmvc处理(jackson传输数据):
@RequestMapping(value = {"/loadAjax"}, method = RequestMethod.GET)
@ResponseBody
public String loadUserByDataTable() throws JsonProcessingException {
ObjectMapper mapper = new ObjectMapper();
Set<CommRole> commRolesList = new HashSet<CommRole>();
CommRole commRole = null;
for(int i=1;i<4;i++) {
commRole = new CommRole();
commRole.setId(Long.valueOf(i));
commRole.setName("Name+"+(i+1));
commRolesIdList.add(commRole);
}
List<CommUser> commUserList = new ArrayList<CommUser>();
CommUser commUser = null;
for (int i = 0; i < 100; i++) {
commUser = new CommUser();
commUser.setName("name" +i);
commUser.setCommRoles(commRolesList);
commUser.setEmail( "1.@126.com");
commUser.setPassword("123456");
commUser.setUsername("username");
commUser.setPhone("123456789");
commUser.setId(Long.valueOf(i+1));
commUserList.add(commUser);
}
String testData = "{'aaData':[{ \"name\": \"Tiger Nixon\", \"username\": \"System Architect\", \"phone\": \"$3,120\", \"email\": \"2011/04/25\", \"id\": \"Edinburgh\" }]}";
String commListJson = mapper.writeValueAsString(<pre name="code" class="html">testData
); System.out.println(commListJson); return commListJson; }
二:配置介绍
datatable初始化:
var table = $('#example').DataTable({
"deferLoading": null,
"destroy": false,
"displayStart": 0,
"dom": "lfrtip",
"lengthMenu": [10, 25, 50, 100],
"order": [[0, 'asc']],
"orderCellsTop": false,
"orderClasses": true,
"orderFixed": [0, 'asc'],
"orderMulti": true,
"pageLength": 10,
"pagingType": "simple_numbers",
"renderer": "bootstrap",
"retrieve": false,
"rowId": "DT_RowId",
"scrollCollapse": false,
"search": {
"caseInsensitive": true,
"regex": false,
"search": "Fred",
"smart": true
},
"searchCols": [
null, {
"search": "My filter"
},
null,
{
"search": "^[0-9]",
"escapeRegex": false
}
],
"searchDelay": null,
"stateDuration": 7200,
"stripeClasses": ['odd', 'even'],
"tabIndex": 0
});
columns列配置:
var table = $('#example').DataTable({
"columns": [{
"cellType": "td",
"className": "my_class",
"contentPadding": "mmm",
"createdCell": function(td, cellData, rowData, row, col) {
if (cellData < 1) {
$(td).css('color', 'red')
}
},
"data": "engine",
"defaultContent": "<i>Not set</i>",
"name": "engine",
"orderable": true,
"orderData": [0, 1],
"orderDataType": "dom-text",
"orderSequence": ["asc"],
"<span style="color:#ff0000;">render</span>": function(data, type, full, meta) {
return '<a href="' + data + '">Download</a>';
},
"searchable": true,
"title": "My column title",
"type": "html",
"visible": true,
"width": "20%",
}]
});
var table = $('#example').DataTable({
"columnDefs": [{
"targets": 0,
"cellType": "td",
"className": "my_class",
"contentPadding": "mmm",
"createdCell": function(td, cellData, rowData, row, col) {
if (cellData < 1) {
$(td).css('color', 'red')
}
},
"data": "engine",
"defaultContent": "<i>Not set</i>",
"name": "engine",
"orderable": true,
"orderData": [0, 1],
"orderDataType": "dom-text",
"orderSequence": ["asc"],
"<span style="color:#ff0000;">render</span>": function(data, type, full, meta) {
return '<a href="' + data + '">Download</a>';
},
"searchable": true,
"title": "My column title",
"type": "html",
"visible": true,
"width": "20%",
}]
});