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，由於改起來麻煩，就不做調整了
