这个框架前前后后跳进了很多次坑，也算是本人比较愚笨吧做了很长的时间而积累的经验。。。
dataTable用了很久，今天在此总结一下使用方法以及常用属性的解释。
Html代码 ：
<div class="row">
<div class="col-md-12">
<!-- BEGIN Portlet PORTLET-->
<div class="portlet box blue">
<!--框架头 -->
<div class="portlet-title">
<div class="caption">
<i class="fa fa-gift"></i>锁列表
</div>
</div>
<!--END 框架头 -->
<div class="portlet-body">
<!-- 搜索-->
<!--<div class="form-horizontal">-->
<form class="form-horizontal" action="/ajax/lock/list" method="POST" id="form">
<div class="form-wizard">
<div class="form-body">
<div class="tab-content">
<div class="tab-pane active" id="tab1">
<div class="form-group">
<label class="control-label col-md-1"> 产品型号</label>
<div class="col-md-2">
<input type="text" class="form-control" name="product_ver" value="" id="product_ver"/>
</div>
<label class="control-label col-md-1"> mac</label>
<div class="col-md-2">
<input type="text" class="form-control" name="mac" value="" id="mac"/>
</div>
<label class="control-label col-md-1"> 锁编号</label>
<div class="col-md-2">
<input type="text" class="form-control" name="lock_id" value="" id="lock_id"/>
</div>
<label class="control-label col-md-1">固件版本</label>
<div class="col-md-2">
<select name="firmware_ver" class="form-control" value="" id="firmware_ver">
<option value="0"></option>
<option value="1">正常</option>
<option value="2">锁住</option>
<option value="3">开放</option>
</select>
</div>
</div> <div class="form-group">
<label class="control-label col-md-1">合作企业</label>
<div class="col-md-2">
<select name="corp_id" class="form-control" value="" id="corp_id">
<option value="0"></option>
<option value="1">安居心</option>
<option value="2">国海</option>
</select>
</div>
<label class="control-label col-md-1">是否有猫眼</label>
<div class="col-md-2">
<select name="cat_eya" class="form-control" value="" id="cat_eya">
<option value="0"></option>
<option value="true">有</option>
<option value="false">没有</option> </select>
</div>
<label class="control-label col-md-1"> 用户</label>
<div class="col-md-2">
<input type="text" class="form-control" name="master_id" value="" id="master_id"/>
</div>
<label class="control-label col-md-1">是否有路由器</label>
<div class="col-md-2">
<select name="has_ap" class="form-control" value="" id="has_ap">
<option value="0"></option>
<option value="1">正常</option>
<option value="2">锁住</option>
<option value="3">开放</option>
</select>
</div>
</div>
<div class="info-btn"><button id="submit">查询</button></div>
</div>
</div>
</div>
</div>
<!--</div>-->
</form>
<!--END 搜索-->
<div class="row">
<div class="col-md-12">
<!-- 开始PORTLET示例表-->
<div class="portlet light bordered">
<div class="portlet-body">
<table class="table table-striped table-bordered table-hover dt-responsive" width="100%" id="sample">
<thead>
<tr>
<th>锁编号</th>
<th>锁名称</th>
<th>猫眼</th>
<th>锁类型</th>
<th>MAC</th>
<th>锁地址</th>
<th>报警状态</th>
<th>是否在线</th>
<th>合作企业</th>
<th>产品型号</th>
<th>固件版本</th>
<th>用户</th>
<th>是否有路由器</th>
<th>备注</th>
<th>操作</th>
</tr>
</thead>
<tbody></tbody>
</table>
</div>
</div>
<!-- END PORTLET示例表-->
</div>
</div>
</div>
</div>
<!-- END Portlet PORTLET-->
</div>
</div>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<h4 class="modal-title" id="myModalLabel">修改</h4>
</div>
<div class="modal-body">
<div class="form-group">
<label class="control-label"> 锁编号</label>
<input type="text" class="form-control" id="id" disabled>
</div>
<div class="form-group">
<label class="control-label"> 锁名称</label>
<input type="text" class="form-control" id="name" >
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
<button type="button" class="btn btn-primary" id="save">保存</button>
</div>
</div>
</div>
</div>
js 下面是dataTable配置方式以及参数详解：
$(document).ready(function() {
$("#sample").DataTable({
// Internationalisation. For more info refer to http://datatables.net/manual/i18n
language: {
"aria": {
"sortAscending": ": 以升序排列此列",
"sortDescending": ": 以降序排列此列"
},
"emptyTable": "表中数据为空",
"info": "当前显示第 _START_ 至 _END_ 项，共 _TOTAL_ 项。",
"infoEmpty": "没有发现记录",
"infoFiltered": "(由 _MAX_ 项结果过滤)",
"infoPostFix": "",
"infoThousands": ",",
"lengthMenu": "每页 _MENU_ 项",
"loadingRecords": "载入中...",
"processing": "处理中...",
"paginate": {
"first": "首页",
"previous": "上页",
"next": "下页",
"last": "末页",
},
//"search": "搜索:",
//"url": "",
"zeroRecords": "没有匹配结果"
},
order: [],//取消默认排序查询,否则复选框一列会出现小箭头
bLengthChange:false,
autoWidth:false,//禁用自动调整列宽
stripeClasses: ["odd", "even"],//为奇偶行加上样式，兼容不支持CSS伪类的场合
searching:false,//禁用原生搜索
orderMulti:false,//启用多列排序
renderer:"bootstrap",//渲染样式：Bootstrap和jquery-ui
pagingType:"simple_numbers", //分页样式：simple,simple_numbers,full,full_numbers
ajax: function (data, callback) {
var param = {};
param.limit = data.length;//每页显示多少
param.start = data.start;//开始的记录序号
//console.log(param.limit);
//param.draw = 1;
$.ajax({
type: "POST",
url: "/ajax/lock/list",
//cache: false, //禁用缓存
data: JSON.stringify(param), //传入组装的参数
queryParams:function(params){
var xsrf = $("input[name = '_xsrf']")
if(xsrf != undefined){
params._xsrf = product_ver[0].value;
}
var limit = $("select[name='table-record_length']");
if(limit != undefined){
limit = (limit[0] && limit[0].value) || 20;
params.length = limit;
}
return params
},
dataSrc: function(response){
return response.data;
},
dataType: "json",
success: function (result) {
//console.log(result);
//setTimeout仅为测试延迟效果
setTimeout(function () {
//封装返回数据
var returnData = {};
returnData.draw = data.draw;//这里直接自行返回了draw计数器,应该由后台返回
returnData.recordsTotal = result.recordsTotal;//返回数据全部记录
returnData.recordsFiltered = result.recordsTotal;//后台不实现过滤功能，每次查询均视作全部结果
returnData.data = result.data;//返回的数据列表
//console.log(returnData);
//调用DataTables提供的callback方法，代表数据已封装完成并传回DataTables进行渲染
//此时的数据需确保正确无误，异常判断应在执行此回调前自行处理完毕
callback(returnData);
}, 200);
}
})
},
processing:true,//隐藏加载提示,自行处理
serverSide:true,//启用服务器端分页
bStateSave: true,//配置好这个,刷新页面会让页面停留在之前的页码
columns:[
{ "data": "lock_id","searchable":false,"orderable":true},
{ "data": "name","searchable":false,"orderable":false},
{ "data": "cat_eye", "render":function(data){
switch(data){
case true:
return '有';
case false:
return '没有';
}
}},
{ "data": "type", "render":function(data){
switch(data){
case 0:
return 'F-A';
case 1:
return 'F-B';
default:
return 'F-C'
}
}},
{ "data": "mac","searchable":false,"orderable":false},
{ "data": "province","searchable":false,"orderable":false},
{ "data": "alarm", "render":function(data){
switch(data){
case 0:
return '正常';
case 1:
return '不正常';
}
}},
{ "data": "online", "render":function(data){
switch(data){
case true:
return '在线';
case false:
return '不在线';
}
}},
{ "data": "corp_id", "render":function(data){
switch(data){
case 0:
return '安居心';
case 1:
return '国海';
}
}},
{ "data": "product_ver","searchable":false,"orderable":false},
{ "data": "firmware_ver","searchable":false,"orderable":false},
{ "data": "master_id","searchable":false,"orderable":false},
{ "data": "has_ap", "render":function(data){
switch(data){
case true:
return '有';
case false:
return '没有';
}
}},
{ "data": "descr","searchable":false,"orderable":false},
{
"data": null,
"className": "center",
"defaultContent": '<button type="button" id="editor_edit" data-toggle="modal" class="btn btn-outline btn-circle btn-sm purple">编辑</button> / <button id="editor_remove" class="btn btn-outline btn-circle dark btn-sm black">删除</button>'
}
],
});
//表数据删除
$('#sample').on( 'click', 'button#editor_remove', function (even) {
even.preventDefault;//方法阻止元素发生默认的行为（例如，当点击提交按钮时阻止对表单的提交）。
if(confirm("确定删除该信息？") == false){
return;
}else{
var data = $("#sample").DataTable().row( $(this).parents('tr') ).data();
$.ajax({
url: '/ajax/lock/delete',//URL由scheme(协议)、netloc(主机)、path(路径)、params(最后路径的参数)、query(查询字段)、fragment(瞄)组成
type: 'POST',
dataType: 'json',
data: JSON.stringify({
lock_id: data["lock_id"]
}),
success:function(data){
if (data.success == null){
alert('删除成功!');
start = $("#sample").dataTable().fnSettings()._iDisplayStart;//从第几行开始显示数据
total = $("#sample").dataTable().fnSettings().fnRecordsDisplay();//
window.location.reload();
if((total-start) == 1){
if (start > 0) {
$("#sample").dataTable().fnPageChange( 'previous', true);//已回到上一页中 .注意$("#sorting-advanced").dataTable().fnPageChange( 'previous'); 是不行的，必需进行刷新，否则页面中显示的iDisplayStart会从cookie中取得，还是删除前的iDisplayStart
}
}
}
},
error:function(){
console.log(data);
alert('服务器无响应，请联系管理员!');
}
})
}
});
// 数据编辑
$('#sample i').css({"fontStyle":"normal"});
$('#sample').on( 'click', 'button#editor_edit', function (even) {
even.preventDefault;//方法阻止元素发生默认的行为（例如，当点击提交按钮时阻止对表单的提交）。
var data = $("#sample").DataTable().row( $(this).parents('tr') ).data();
//清空内容
//$('.col-md-6 input').val('');
// console.log(data);
//弹出层展示
$('#myModal').modal('show')
//$("#myModal").draggable({handle: ".modal-header"});
//填充内容
$('#id').val(data.lock_id);
$('#name').val(data.name);
});
$('#save').on('click',function(){
var lock_id = parseInt($('#id').val());
var name = $('#name').val();
$.ajax({
url:'/ajax/lock/update',
type:'POST',
contentType: "application/json",
timeout : "3000",
cache:false,
data: JSON.stringify({
"lock_id" : lock_id,
"name" : name,
}),
dataType: "json",
success:function(data){
console.log(data);
//弹窗关闭
$('#save').hide();
window.location.reload();
},
error:function(err){
alert("数据刷新失败,请重新刷新");
}
});
});
/* //数据查询
$('.form-horizontal').on("submit", function ( event){
event.preventDefault();
var jsonData = $("form").serializeJSON();
console.log(jsonData);
$.post('/ajax/lock/list', params, function(result){
}).success(function(response){
console.log(response);
//do something with the response
})
})*/
});
//数据查询
function onLockSearchSubmit() {
//获取表单数据
var productVerObj = $("[name='product_ver']");
var macObj = $("[name='mac']");
var lockIdObj = $("[name='lock_id']");
var firmwareVerObj = $("[name='firmware_ver']");
var corpIdObj = $("[name='corp_id']");
var catEyeObj = $("[name='cat_eye']");
var masterIdObj = $("[name='master_id']");
var hasApObj = $("[name='has_ap']");
var form = $("form");
form.submit(function () {
return false;
});
var url = "/ajax/lock/list";
var params = {};
if (productVerObj.val() != "") {
params["product_ver"] = productVerObj.val();
}
if(macObj.val() != "") {
params["mac"] = macObj.val();
}
if(lockIdObj.val() > 0) {
params["lock_id"] = lockIdObj.val();
}
if(firmwareVerObj.val() != 0) {
params["firmware_ver"] = firmwareVerObj.val();
}
if(corpIdObj.val() != 0) {
params["corp_id"] = corpIdObj.val();
}
if(catEyeObj.val() != 0) {
params["cat_eye"] = catEyeObj.val();
}
if(masterIdObj.val() != 0) {
params["master_id"] = masterIdObj.val();
}
if(hasApObj.val() != false) {
params["has_ap"] = hasApObj.val();
}
params = JSON.stringify(params);
$.post(url, params, function(result){
var table_data = JSON.parse(result)["data"];
var table = $("#sample").DataTable();
table.destroy();
$("#sample").empty();
$("#sample").DataTable({
language: {
"aria": {
"sortAscending": ": 以升序排列此列",
"sortDescending": ": 以降序排列此列"
},
"emptyTable": "表中数据为空",
"info": "当前显示第 _START_ 至 _END_ 项，共 _TOTAL_ 项。",
"infoEmpty": "没有发现记录",
"infoFiltered": "(由 _MAX_ 项结果过滤)",
"infoPostFix": "",
"infoThousands": ",",
"lengthMenu": "每页 _MENU_ 项",
"loadingRecords": "载入中...",
"processing": "处理中...",
"paginate": {
"first": "首页",
"previous": "上页",
"next": "下页",
"last": "末页",
},
//"search": "搜索:",
//"url": "",
"zeroRecords": "没有匹配结果"
},
bLengthChange:false,
autoWidth:false,//禁用自动调整列宽
stripeClasses: ["odd", "even"],//为奇偶行加上样式，兼容不支持CSS伪类的场合
searching:false,//禁用原生搜索
orderMulti:false,//启用多列排序
renderer:"bootstrap",//渲染样式：Bootstrap和jquery-ui
pagingType:"simple_numbers", //分页样式：simple,simple_numbers,full,full_numbers
order: [],//取消默认排序查询,否则复选框一列会出现小箭头
data: table_data,
//表头，有很多种写法可以把这些属性放在一个花括号里面，targets是下标从0开始的
columnDefs: [
{ "title": "锁编号", "targets": 0 },
{ "title": "锁名称", "targets": 1 },
{ "title": "猫眼", "targets": 2 },
{ "title": "锁类型", "targets": 3 },
{ "title": "MAC", "targets": 4 },
{ "title": "锁地址", "targets": 5 },
{ "title": "报警状态", "targets": 6 },
{ "title": "是否在线", "targets": 7 },
{ "title": "合作企业", "targets": 8 },
{ "title": "产品型号", "targets": 9 },
{ "title": "固件版本", "targets": 10 },
{ "title": "用户", "targets": 11 },
{ "title": "是否有路由器", "targets": 12 },
{ "title": "备注", "targets": 13 },
{ "title": "操作", "targets": 14 },
],
columns: [
{ "data": "lock_id","searchable":false,"orderable":true},
{ "data": "name","searchable":false,"orderable":false},
{ "data": "cat_eye", "render":function(data){
switch(data){
case true:
return '有';
case false:
return '没有';
}
}},
{ "data": "type", "render":function(data){
switch(data){
case 0:
return 'F-A';
case 1:
return 'F-B';
default:
return 'F-C'
}
}},
{ "data": "mac","searchable":false,"orderable":false},
{ "data": "province","searchable":false,"orderable":false},
{ "data": "alarm", "render":function(data){
switch(data){
case 0:
return '正常';
case 1:
return '不正常';
}
}},
{ "data": "online", "render":function(data){
switch(data){
case true:
return '在线';
case false:
return '不在线';
}
}},
{ "data": "corp_id", "render":function(data){
switch(data){
case 0:
return '安居心';
case 1:
return '国海';
}
}},
{ "data": "product_ver","searchable":false,"orderable":false},
{ "data": "firmware_ver","searchable":false,"orderable":false},
{ "data": "master_id"},
{ "data": "has_ap", "render":function(data){
switch(data){
case true:
return '有';
case false:
return '没有';
}
}},
{ "data": "descr","searchable":false,"orderable":false},
{
"data": null,
"className": "center",
"defaultContent": '<button type="button" id="editor_edit" data-toggle="modal" class="btn btn-outline btn-circle btn-sm purple">编辑</button> / <button id="editor_remove" class="btn btn-outline btn-circle dark btn-sm black">删除</button>'
}
],
})
})
}
不懂的可以加WX详细聊 TangYR168