datatables
datatables 插件官网下载,地址:http://www.datatables.club/
例子图片:
1. html
<!doctype html>
<html>
<head lang="en">
<meta charset="utf-8">
<title>QualityUser</title>
<link href="thirdparty/dataTables/media/css/jquery.dataTables.css" type="text/css" rel="stylesheet" />
<link rel="stylesheet" type="text/css" href="css/qualityuser.css" />
</head>
<body>
<div class="content rdk_main">
<div class="table_box">
<div id="qualityTable" class="table_content">
<table id="respondTable" class="table display table-bordered" cellspacing="0" width="100%">
<thead>
<tr>
<th>所属地市</th>
<th>总用户数</th>
<th>播放用户数</th>
<th>质差用户数</th>
<th>质差率</th>
</tr>
</thead>
</table>
</div>
</div>
</div>
</div>
</body>
</html>
<!--------------------------------第三方插件------------------------------------>
<script src="thirdparty/jquery.min.js" type="text/javascript"></script>
<script src="thirdparty/dataTables/media/js/jquery.dataTables.js"></script>
<script src="thirdparty/dataTables/extensions/Buttons/js/dataTables.buttons.js" type="text/javascript"></script>
<script src="thirdparty/dataTables/extensions/Buttons/js/buttons.html5.js" type="text/javascript"></script>
<!-----------------------------用户js文件-------------------------------->
<script src="js/qualityuser/qualityuser_Table.js"></script>
2.js datatables的初始化(qualityuser_Table.js)
<!doctype html>
<html>
<head lang="en">
<meta charset="utf-8">
<title>QualityUser</title>
<link href="thirdparty/dataTables/media/css/jquery.dataTables.css" type="text/css" rel="stylesheet" />
<link rel="stylesheet" type="text/css" href="css/qualityuser.css" />
</head>
<body>
<div class="content rdk_main">
<div class="table_box">
<div id="qualityTable" class="table_content">
<table id="respondTable" class="table display table-bordered" cellspacing="0" width="100%">
<thead>
<tr>
<th>所属地市</th>
<th>总用户数</th>
<th>播放用户数</th>
<th>质差用户数</th>
<th>质差率</th>
</tr>
</thead>
</table>
</div>
</div>
</div>
</div>
</body>
</html>
<!--------------------------------第三方插件------------------------------------>
<script src="thirdparty/jquery.min.js" type="text/javascript"></script>
<script src="thirdparty/dataTables/media/js/jquery.dataTables.js"></script>
<script src="thirdparty/dataTables/extensions/Buttons/js/dataTables.buttons.js" type="text/javascript"></script>
<script src="thirdparty/dataTables/extensions/Buttons/js/buttons.html5.js" type="text/javascript"></script>
<!-----------------------------用户js文件-------------------------------->
<script src="js/qualityuser/qualityuser_Table.js"></script>
//主函数入口
$(function(){
switchDisplayTable();
});
var $respondTable = $('#respondTable');
var $respondDetailTable=$('#respondDetailTable');
var qualityTable = {
qualityTable:null,
qualityTableTotal: 0,
qualityTableFiltered: 0,
options: {
language: {
"sProcessing": "处理中...",
"sLengthMenu": "每页 _MENU_ 项",
"sZeroRecords": "",
"sInfo": "共 _TOTAL_ 项结果",
"sInfoEmpty": "",
"sInfoFiltered": "",
"sInfoPostFix": "",
"sSearch": "搜索:",
"sUrl": "",
"sEmptyTable": "表中数据为空",
"sLoadingRecords": "载入中...",
"sInfoThousands": ",",
"oPaginate": {
"sFirst": "首页",
"sPrevious": "上一页",
"sNext": "下一页",
"sLast": "末页",
"sJump": "跳转"
},
"oAria": {
"sSortAscending": ": 以升序排列此列",
"sSortDescending": ": 以降序排列此列"
}
},
"bPaginate": true,//是否分页
"bRetrieve": true,
"bFilter": false, // 搜索栏 过滤功能
"searching": true,
"iDisplayLength": 5,//每页的行数
"bLengthChange": false,
"bDestroy": true,
"bAutoWidth": false, // 自动宽度
"stripeClasses": ["odd", "even"],
"sDom": '<"top clearfix"B>rt<"bottom clearfix"ip>',
"serverSide": false,//是否开启服务器模式,即后端分页,数据来源(包括处理分页,排序,过滤)
"ordering": true,//是否关闭排序功能
"order": [[ 3, "desc" ]],//默认排序,以第4列降序排序
"bSort":false,
"columnDefs": [{
"render": function (data, type, row, rowcol) {
return (data == 'null') ? "--" : data;
},
"targets":"_all"
}],
"columnDefs": [
{ "orderable": false, "targets": 0 },
{ "orderable": false, "targets": 1 }
],//配置第一列和第二列不允许排序
// "columnDefs": [{ "visible": false, "targets": 0 }]//设置第一列隐藏
}
};
function getTableConfig(tableName) {
var config = {};
config.total = onsiteTable[tableName+"Total"];
config.filtered=onsiteTable[tableName+"Filtered"];
config.table = tableName;
return config;
}
function ajaxTable1(data, callback, settings, table) { //ajax配置为function,手动调用异步查询
lenth=data.length;
draw=data.draw;
page=(data.start / data.length);
console.log("lenth="+lenth);
console.log("draw="+draw);
console.log("page="+page);
var returnData = {};
returnData.draw = 3;//这里直接自行返回了draw计数器,应该由后台返回(需后端返回)
returnData.recordsTotal = 40;//即没有过滤的记录数(数据库里总共记录数)(需后端返回)
qualityTable["qualityTableTot