JQuery.datatable —— 渲染表格与分页
前言
工作中,使用到JQuery.datatable实现表格到渲染和分页。记录一下咋实现的。
完整代码
- html
<table id="tableTest" class="table table-striped table-bordered nowrap" cellspacing="0" width="100%">
<thead>
<tr>
<th>主键</th>
<th>参数 1 </th>
<th>参数 2 </th>
<th>参数 3 </th>
<th>参数 4 </th>
<th>参数 5 </th>
<th>参数 6 </th>
<th>参数 7 </th>
<th>参数 8 </th>
<th>参数 9 </th>
<th>参数 10 </th>
<th>参数 11 </th>
<th>参数 12 </th>
<th>参数 13 </th>
<th>参数 14 </th>
<th>参数 15 </th>
<th>参数 16 </th>
<th>参数 17 </th>
<th>参数 18 </th>
</tr>
</thead>
<tfoot>
<tr>
<th>主键</th>
<th>参数 1 </th>
<th>参数 2 </th>
<th>参数 3 </th>
<th>参数 4 </th>
<th>参数 5 </th>
<th>参数 6 </th>
<th>参数 7 </th>
<th>参数 8 </th>
<th>参数 9 </th>
<th>参数 10 </th>
<th>参数 11 </th>
<th>参数 12 </th>
<th>参数 13 </th>
<th>参数 14 </th>
<th>参数 15 </th>
<th>参数 16 </th>
<th>参数 17 </th>
<th>参数 18 </th>
</tr>
</tfoot>
</table>
- js
$(document).ready(function() {
function getMyDate(time){
var oDate = new Date(time),
oYear = oDate.getFullYear(),
oMonth = oDate.getMonth()+1,
oDay = oDate.getDate(),
oHour = oDate.getHours(),
oMin = oDate.getMinutes(),
oSen = oDate.getSeconds(),
oTime = oYear +'-'+ getzf(oMonth) +'-'+ getzf(oDay) +' '+ getzf(oHour) +':'+ getzf(oMin) +':'+getzf(oSen);//最后拼接时间
return oTime;
};
//补0操作,当时间数据小于10的时候,给该数据前面加一个0
function getzf(num){
if(parseInt(num) < 10){
num = '0'+num;
}
return num;
}
$('#tableTest').DataTable( {
"ajax": "tableTestAjaxFindAll",
"columns": [
{ "data": "assetId" },
{ "data": "parame1" },
{ "data": "parame2" },
{ "data": "parame3" },
{ "data": "parame4" },
{ "data": "parame5" },
{ "data": "parame6" },
{ "data": "parame7" },
{ "data": "parame8" },
{ "data": "parame9" },
{ "data": "parameTypeint" },
// 这里调用了一个格式化日期函数
{ "data": function(obj){
return getMyDate(obj.parameDatetime)
}
},
{ "data": "parameDecimal" },
{ "data": "parame13" },
{ "data": "parame14" },
{ "data": "parame15" },
{ "data": "parame16" },
{ "data": "parame17" },
{ "data": "parame18" }
],
language: {
"sProcessing": "处理中...",
"sLengthMenu": "显示 _MENU_ 项结果",
"sZeroRecords": "没有匹配结果",
"sInfo": "显示第 _START_ 至 _END_ 项结果,共 _TOTAL_ 项",
"sInfoEmpty": "显示第 0 至 0 项结果,共 0 项",
"sInfoFiltered": "(由 _MAX_ 项结果过滤)",
"sInfoPostFix": "",
"sSearch": "搜索:",
"sUrl": "",
"sEmptyTable": "表中数据为空",
"sLoadingRecords": "载入中...",
"sInfoThousands": ",",
"oPaginate": {
"sFirst": "首页",
"sPrevious": "上一页",
"sNext": "下一页",
"sLast": "尾页"
},
"oAria": {
"sSortAscending": ": 以升序排列此列",
"sSortDescending": ": 以降序排列此列"
}
}
} );
} );
- json数据
{
"data": [
{
"assetId": "345a7d84788911e9b125d22648f5f6f1",
"parame1": "Parame1-0",
"parame13": "Parame13-0",
"parame14": "Parame14-0",
"parame15": "Parame15-0",
"parame16": "Parame16-0",
"parame17": "Parame17-0",
"parame18": "Parame18-0",
"parame2": "Parame2-0",
"parame3": "Parame3-0",
"parame4": "Parame4-0",
"parame5": "Parame5-0",
"parame6": "Parame6-0",
"parame7": "Parame7-0",
"parame8": "Parame8-0",
"parame9": "Parame9-0",
"parameDatetime": 1558086629000,
"parameDecimal": 0,
"parameTypeint": 0
},
{
"assetId": "3461a5dc788911e9b125d22648f5f6f1",
"parame1": "Parame1-1",
"parame13": "Parame13-1",
"parame14": "Parame14-1",
"parame15": "Parame15-1",
"parame16": "Parame16-1",
"parame17": "Parame17-1",
"parame18": "Parame18-1",
"parame2": "Parame2-1",
"parame3": "Parame3-1",
"parame4": "Parame4-1",
"parame5": "Parame5-1",
"parame6": "Parame6-1",
"parame7": "Parame7-1",
"parame8": "Parame8-1",
"parame9": "Parame9-1",
"parameDatetime": 1558086630000,
"parameDecimal": 1,
"parameTypeint": 1
},
{
"assetId": "3462cd2c788911e9b125d22648f5f6f1",
"parame1": "Parame1-2",
"parame13": "Parame13-2",
"parame14": "Parame14-2",
"parame15": "Parame15-2",
"parame16": "Parame16-2",
"parame17": "Parame17-2",
"parame18": "Parame18-2",
"parame2": "Parame2-2",
"parame3": "Parame3-2",
"parame4": "Parame4-2",
"parame5": "Parame5-2",
"parame6": "Parame6-2",
"parame7": "Parame7-2",
"parame8": "Parame8-2",
"parame9": "Parame9-2",
"parameDatetime": 1558086630000,
"parameDecimal": 2,
"parameTypeint": 2
},
{
"assetId": "34639dc4788911e9b125d22648f5f6f1",
"parame1": "Parame1-3",
"parame13": "Parame13-3",
"parame14": "Parame14-3",
"parame15": "Parame15-3",
"parame16": "Parame16-3",
"parame17": "Parame17-3",
"parame18": "Parame18-3",
"parame2": "Parame2-3",
"parame3": "Parame3-3",
"parame4": "Parame4-3",
"parame5": "Parame5-3",
"parame6": "Parame6-3",
"parame7": "Parame7-3",
"parame8": "Parame8-3",
"parame9": "Parame9-3",
"parameDatetime": 1558086630000,
"parameDecimal": 3,
"parameTypeint": 3
},
{
"assetId": "34648900788911e9b125d22648f5f6f1",
"parame1": "Parame1-4",
"parame13": "Parame13-4",
"parame14": "Parame14-4",
"parame15": "Parame15-4",
"parame16": "Parame16-4",
"parame17": "Parame17-4",
"parame18": "Parame18-4",
"parame2": "Parame2-4",
"parame3": "Parame3-4",
"parame4": "Parame4-4",
"parame5": "Parame5-4",
"parame6": "Parame6-4",
"parame7": "Parame7-4",
"parame8": "Parame8-4",
"parame9": "Parame9-4",
"parameDatetime": 1558086630000,
"parameDecimal": 4,
"parameTypeint": 4
},
{
"assetId": "346584d6788911e9b125d22648f5f6f1",
"parame1": "Parame1-5",
"parame13": "Parame13-5",
"parame14": "Parame14-5",
"parame15": "Parame15-5",
"parame16": "Parame16-5",
"parame17": "Parame17-5",
"parame18": "Parame18-5",
"parame2": "Parame2-5",
"parame3": "Parame3-5",
"parame4": "Parame4-5",
"parame5": "Parame5-5",
"parame6": "Parame6-5",
"parame7": "Parame7-5",
"parame8": "Parame8-5",
"parame9": "Parame9-5",
"parameDatetime": 1558086630000,
"parameDecimal": 5,
"parameTypeint": 5
},
{
"assetId": "3466b0c2788911e9b125d22648f5f6f1",
"parame1": "Parame1-6",
"parame13": "Parame13-6",
"parame14": "Parame14-6",
"parame15": "Parame15-6",
"parame16": "Parame16-6",
"parame17": "Parame17-6",
"parame18": "Parame18-6",
"parame2": "Parame2-6",
"parame3": "Parame3-6",
"parame4": "Parame4-6",
"parame5": "Parame5-6",
"parame6": "Parame6-6",
"parame7": "Parame7-6",
"parame8": "Parame8-6",
"parame9": "Parame9-6",
"parameDatetime": 1558086630000,
"parameDecimal": 6,
"parameTypeint": 6
},
{
"assetId": "346736f0788911e9b125d22648f5f6f1",
"parame1": "Parame1-7",
"parame13": "Parame13-7",
"parame14": "Parame14-7",
"parame15": "Parame15-7",
"parame16": "Parame16-7",
"parame17": "Parame17-7",
"parame18": "Parame18-7",
"parame2": "Parame2-7",
"parame3": "Parame3-7",
"parame4": "Parame4-7",
"parame5": "Parame5-7",
"parame6": "Parame6-7",
"parame7": "Parame7-7",
"parame8": "Parame8-7",
"parame9": "Parame9-7",
"parameDatetime": 1558086630000,
"parameDecimal": 7,
"parameTypeint": 7
},
{
"assetId": "3467c21e788911e9b125d22648f5f6f1",
"parame1": "Parame1-8",
"parame13": "Parame13-8",
"parame14": "Parame14-8",
"parame15": "Parame15-8",
"parame16": "Parame16-8",
"parame17": "Parame17-8",
"parame18": "Parame18-8",
"parame2": "Parame2-8",
"parame3": "Parame3-8",
"parame4": "Parame4-8",
"parame5": "Parame5-8",
"parame6": "Parame6-8",
"parame7": "Parame7-8",
"parame8": "Parame8-8",
"parame9": "Parame9-8",
"parameDatetime": 1558086630000,
"parameDecimal": 8,
"parameTypeint": 8
},
{
"assetId": "346834f6788911e9b125d22648f5f6f1",
"parame1": "Parame1-9",
"parame13": "Parame13-9",
"parame14": "Parame14-9",
"parame15": "Parame15-9",
"parame16": "Parame16-9",
"parame17": "Parame17-9",
"parame18": "Parame18-9",
"parame2": "Parame2-9",
"parame3": "Parame3-9",
"parame4": "Parame4-9",
"parame5": "Parame5-9",
"parame6": "Parame6-9",
"parame7": "Parame7-9",
"parame8": "Parame8-9",
"parame9": "Parame9-9",
"parameDatetime": 1558086630000,
"parameDecimal": 9,
"parameTypeint": 9
},
{
"assetId": "3468a012788911e9b125d22648f5f6f1",
"parame1": "Parame1-10",
"parame13": "Parame13-10",
"parame14": "Parame14-10",
"parame15": "Parame15-10",
"parame16": "Parame16-10",
"parame17": "Parame17-10",
"parame18": "Parame18-10",
"parame2": "Parame2-10",
"parame3": "Parame3-10",
"parame4": "Parame4-10",
"parame5": "Parame5-10",
"parame6": "Parame6-10",
"parame7": "Parame7-10",
"parame8": "Parame8-10",
"parame9": "Parame9-10",
"parameDatetime": 1558086630000,
"parameDecimal": 10,
"parameTypeint": 10
},
{
"assetId": "34690aac788911e9b125d22648f5f6f1",
"parame1": "Parame1-11",
"parame13": "Parame13-11",
"parame14": "Parame14-11",
"parame15": "Parame15-11",
"parame16": "Parame16-11",
"parame17": "Parame17-11",
"parame18": "Parame18-11",
"parame2": "Parame2-11",
"parame3": "Parame3-11",
"parame4": "Parame4-11",
"parame5": "Parame5-11",
"parame6": "Parame6-11",
"parame7": "Parame7-11",
"parame8": "Parame8-11",
"parame9": "Parame9-11",
"parameDatetime": 1558086630000,
"parameDecimal": 11,
"parameTypeint": 11
},
{
"assetId": "346976ea788911e9b125d22648f5f6f1",
"parame1": "Parame1-12",
"parame13": "Parame13-12",
"parame14": "Parame14-12",
"parame15": "Parame15-12",
"parame16": "Parame16-12",
"parame17": "Parame17-12",
"parame18": "Parame18-12",
"parame2": "Parame2-12",
"parame3": "Parame3-12",
"parame4": "Parame4-12",
"parame5": "Parame5-12",
"parame6": "Parame6-12",
"parame7": "Parame7-12",
"parame8": "Parame8-12",
"parame9": "Parame9-12",
"parameDatetime": 1558086630000,
"parameDecimal": 12,
"parameTypeint": 12
},
{
"assetId": "346a05ce788911e9b125d22648f5f6f1",
"parame1": "Parame1-13",
"parame13": "Parame13-13",
"parame14": "Parame14-13",
"parame15": "Parame15-13",
"parame16": "Parame16-13",
"parame17": "Parame17-13",
"parame18": "Parame18-13",
"parame2": "Parame2-13",
"parame3": "Parame3-13",
"parame4": "Parame4-13",
"parame5": "Parame5-13",
"parame6": "Parame6-13",
"parame7": "Parame7-13",
"parame8": "Parame8-13",
"parame9": "Parame9-13",
"parameDatetime": 1558086630000,
"parameDecimal": 13,
"parameTypeint": 13
},
{
"assetId": "346a8364788911e9b125d22648f5f6f1",
"parame1": "Parame1-14",
"parame13": "Parame13-14",
"parame14": "Parame14-14",
"parame15": "Parame15-14",
"parame16": "Parame16-14",
"parame17": "Parame17-14",
"parame18": "Parame18-14",
"parame2": "Parame2-14",
"parame3": "Parame3-14",
"parame4": "Parame4-14",
"parame5": "Parame5-14",
"parame6": "Parame6-14",
"parame7": "Parame7-14",
"parame8": "Parame8-14",
"parame9": "Parame9-14",
"parameDatetime": 1558086630000,
"parameDecimal": 14,
"parameTypeint": 14
},
{
"assetId": "346b0e1a788911e9b125d22648f5f6f1",
"parame1": "Parame1-15",
"parame13": "Parame13-15",
"parame14": "Parame14-15",
"parame15": "Parame15-15",
"parame16": "Parame16-15",
"parame17": "Parame17-15",
"parame18": "Parame18-15",
"parame2": "Parame2-15",
"parame3": "Parame3-15",
"parame4": "Parame4-15",
"parame5": "Parame5-15",
"parame6": "Parame6-15",
"parame7": "Parame7-15",
"parame8": "Parame8-15",
"parame9": "Parame9-15",
"parameDatetime": 1558086630000,
"parameDecimal": 15,
"parameTypeint": 15
},
{
"assetId": "346bc10c788911e9b125d22648f5f6f1",
"parame1": "Parame1-16",
"parame13": "Parame13-16",
"parame14": "Parame14-16",
"parame15": "Parame15-16",
"parame16": "Parame16-16",
"parame17": "Parame17-16",
"parame18": "Parame18-16",
"parame2": "Parame2-16",
"parame3": "Parame3-16",
"parame4": "Parame4-16",
"parame5": "Parame5-16",
"parame6": "Parame6-16",
"parame7": "Parame7-16",
"parame8": "Parame8-16",
"parame9": "Parame9-16",
"parameDatetime": 1558086630000,
"parameDecimal": 16,
"parameTypeint": 16
},
{
"assetId": "346c3b0a788911e9b125d22648f5f6f1",
"parame1": "Parame1-17",
"parame13": "Parame13-17",
"parame14": "Parame14-17",
"parame15": "Parame15-17",
"parame16": "Parame16-17",
"parame17": "Parame17-17",
"parame18": "Parame18-17",
"parame2": "Parame2-17",
"parame3": "Parame3-17",
"parame4": "Parame4-17",
"parame5": "Parame5-17",
"parame6": "Parame6-17",
"parame7": "Parame7-17",
"parame8": "Parame8-17",
"parame9": "Parame9-17",
"parameDatetime": 1558086630000,
"parameDecimal": 17,
"parameTypeint": 17
},
{
"assetId": "346ca734788911e9b125d22648f5f6f1",
"parame1": "Parame1-18",
"parame13": "Parame13-18",
"parame14": "Parame14-18",
"parame15": "Parame15-18",
"parame16": "Parame16-18",
"parame17": "Parame17-18",
"parame18": "Parame18-18",
"parame2": "Parame2-18",
"parame3": "Parame3-18",
"parame4": "Parame4-18",
"parame5": "Parame5-18",
"parame6": "Parame6-18",
"parame7": "Parame7-18",
"parame8": "Parame8-18",
"parame9": "Parame9-18",
"parameDatetime": 1558086630000,
"parameDecimal": 18,
"parameTypeint": 18
},
{
"assetId": "346d1714788911e9b125d22648f5f6f1",
"parame1": "Parame1-19",
"parame13": "Parame13-19",
"parame14": "Parame14-19",
"parame15": "Parame15-19",
"parame16": "Parame16-19",
"parame17": "Parame17-19",
"parame18": "Parame18-19",
"parame2": "Parame2-19",
"parame3": "Parame3-19",
"parame4": "Parame4-19",
"parame5": "Parame5-19",
"parame6": "Parame6-19",
"parame7": "Parame7-19",
"parame8": "Parame8-19",
"parame9": "Parame9-19",
"parameDatetime": 1558086630000,
"parameDecimal": 19,
"parameTypeint": 19
}
]
}
- java代码
有一个转换操作
@ResponseBody
@RequestMapping(value = "/tableTestAjaxFindAll", method = RequestMethod.GET)
public String tableTestAjaxFindAll(@RequestParam(value = "page", defaultValue = "0") Integer page,
@RequestParam(value = "size", defaultValue = "10") Integer size,
ModelMap modelMap) {
List<JavaBean> javaBeanList = tableService.findJavaBean();
JSONObject jsonObject = new JSONObject();
jsonObject.put("data", javaBeanList);
return jsonObject.toString();
}
- 效果如下
Parame写错了,应该是Param,由于改起来麻烦,就不做调整了