经验，是前行路上，磕磕碰碰，不断探索，最终留下的结晶；亦是下一次，快速高效，寻求到结果的快捷方式。
datatable插件具体可参考：
官网：http://datatables.club/
参数说明：http://www.cnblogs.com/hyywaq/p/5919412.html
html页面：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<!-- 页面引入css样式 -->
<link rel="stylesheet" type="text/css" href="css/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/datatable/css/dataTables.bootstrap.min.css">
</head>
<body>
<table id="data_table" class="table table-bordered table-striped table-hover" width="100%">
<thead>
<tr>
<th>ID</th>
<th>名称</th>
<th>任务</th>
<th>日期</th>
<th>操作</th>
</tr>
</thead>
<tbody id="data_list">
</tbody>
</table>
<!-- require.js 模块化 -->
<script src="js/common/libs/require.js" data-main="js/list"></script>
</body>
</html>
js:
//定义js文件路径,相对页面的路径
require.config({
paths: {
jquery: ‘js/common/libs/jquery.min‘,
‘datatables.net‘: ‘js/common/libs/datatable/jquery.dataTables.min‘,
dbBootstrap: ‘js/common/libs/datatable/dataTables.bootstrap.min‘
},
shim: {
‘datatables.net‘:{
deps:[‘jquery‘]
},
‘dbBootstrap‘:{
deps:[‘jquery‘,‘datatables.net‘]
}
}
});
require([‘dbBootstrap‘],function(){
var util = { table:{},
//获取列表信息
getListInfo:function(){
var listUrl = ‘‘,
base_url = window.location.host;
util.table = $(‘#data_table‘).dataTable({
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": ": 以降序排列此列"
}
},
"pagingType":‘full_numbers‘, // 分页
"aoColumnDefs": [{"bSortable":false, "aTargets": [4]}], //第5列不排序，其余排序
"order":[[3,‘desc‘]], // 默认按时间倒序 排序
//ajax请求
‘processing‘:true,
‘serverSide‘:true,
‘ajax‘:{
‘url‘:listUrl,
‘dataSrc‘: function(result) {
if(result && result.data && !$.isEmptyObject(result.data)){
return result.data;
}else{
return [];
}
}
},
‘columns‘:[ // 表格数据是obj是映射显示
{data:‘id‘},
{data:‘name‘},
{data:‘task‘},
{data:‘time‘},
{data:function(data){
if(data && data.status && data.status===‘pending‘){
return ‘<a class="pending">进行中</a>‘;
}
return ‘<a class="link-text" href="http://‘+base_url+‘/detail?id=‘+data.id+‘">查看</a>‘;
}}
]
});
// 响应式处理，始终保持分页、搜索等控件在表格的四个角落
var el = [‘data_table_length‘,‘data_table_filter‘,‘data_table_info‘,‘data_table_paginate‘];
for(var i=0, len=el.length; i<len; i++){
$(‘#‘+el[i]).parent().removeClass(‘col-sm-6‘).addClass(‘col-xs-6‘);
};
}
};
util.getListInfo();
});
特别注意：当需要刷新表格数据，即重新渲染表格时，只需按照下面的方式操作即可：
//刷新当表格
reload:function(flag){
setInterval(function(){
if(flag){
util.table.api().ajax.reload(null, true); // 调用插件的方法,第一个参数是回调，第二个参数是：true-重置分页，false-保持之前的分页信息
}
},1000*10);
}
时间： 2024-10-10 15:22:50