前些日子用到的datatables 现做一下总结:
只做实现功能的总结,其中一些基本的配置从官网上就可以看到,比如怎么应用啦,什么的...
附上中文网地址:http://datatables.club/ API挺不错的,可以看看
显示列/隐藏咧--html
//表格底部搜索(column().search( input , regex , smart , caseInsen ))
$('#example tfoot th').each( function () {
var title = $('#example thead th').eq( $(this).index() ).text();
$(this).html( '<input type="text" style="width: 80px;" placeholder="'+title+'" /><br>' );
});
oTable.columns().every( function () {
var that = this;
$( 'input', this.footer() ).on( 'keyup change', function () {
that.search( this.value ,false,true,true)
.draw();
});
});
var checkedAll = false;
oTable = $('#example').DataTable({
"dom":
"<'row'<'col-sm-4'><'col-sm-6'>>" +
"<'row'<'col-sm-12'tr>>" +
"<'row'<'col-sm-4'i><'col-sm-8'<'floatr'p><'floatrs'l>>>",
////"stateSave":true,
"bAutoWidth":false,
"aLengthMenu": [[100, 250, 500], [100, 250, 500]],
"sScrollX": "100%",
//"sScrollXInner": "100%",
//"bScrollCollapse": true,
"sScrollY": "65%",
"processing": true,
"deferRender":true,
// "searching":false,
//"serverSide": true,
"preDrawCallback": function( settings ) {
// console.log(settings.aiDisplay);
row=settings.aiDisplay;
var allData=settings.aoData;
ipSet=[];//制空
setTimeout(function () {
if (checkedAll === false) {
isCkAll =false;
}else{
isCkAll = true;//全选了
for ( var i = 0; i < row.length; i++) {
ipSet.push(allData[row[i]]._aData.ipwan);
}
}
$('#example input[name=checkList]').prop("checked", checkedAll);
}, 0);
},
//汉化
"oLanguage": {
"sLengthMenu": "每页 _MENU_ 条记录",
"sZeroRecords": "没有检索到数据",
"sInfo": "第 _START_ 到第 _END_ 条数据；共有 _TOTAL_ 条记录",
"sInfoEmtpy": "没有数据",
"sProcessing": "正在加载数据...请耐心等待...",
"oPaginate": {
"sFirst": "首页",
"sPrevious": "前页",
"sNext": "后页",
"sLast": "尾页"
}
},
//stateSave:true,
//第一列与第二列禁止排序
"columnDefs": [
{orderable: false,
targets: 0 },
{orderable: false,
targets: 1 ,
"defaultContent": "<input type=\"checkbox\" name=\"checkList\" onclick=\"changechecked(this)\">"
}
],
//第一列排序图标改为默认
"order": [
[0, null],
[1, null]
],
"ajax": {
"url": "getZooKprFetcher",
"dataSrc": "listzoo"
},
"columns": [
/*0*/{"data":"","width":"1%"},
/*1*/{"data":"","width":"1%"},
/*2*/{"data": "ipwan","width":"8%"},
/*3*/{"data": "hostname","width":"8%"},
/*4*/{"data": "iplan","width":"7%"},
/*5*/{"data": "locate" , "width": "9%"},
/*6*/{"data": null,"width":"7%", "render": function(data,type,row,meta){
var isl="";
if(row.islive==1){
isl="<span title='更新时间:"+row.updatetime+"'>存活中</span>";
if(row.isNew==0){
isl="本次未更新"+" <img title=\"未更新,查看服务是否正常,最近更新时间:"+row.updatetime+"\" src=\"images/alert_icon.png\"></img>";
}
}else{
isl="<span title='更新时间:"+row.updatetime+"'>已宕机</span>";
}
return (isl);
}},
//省略.................7-14
/*15*/{"data": null,"width":"9%","render":function(data,type,row,meta){
var shtmldetail="<span class='row-details' data_id='" + data.ipwan + "' onclick=\"showDetail('"+data.ipwan+"')\"><button class=\"btn btn-default btn-sm\"><span class='glyphicon glyphicon-info-sign'>详细</span></button></span> ";
var shtmllog="<button class=\"btn btn-default btn-sm\" onclick=\"showLog('"+data.ipwan+"')\"><span class='glyphicon glyphicon-warning-sign'>Log</span></button>";
return shtmldetail+shtmllog;
}}
],
//列筛选(下拉列筛选--得到渲染后的值)
initComplete: function () {
var api = this.api();
api.columns().indexes().flatten().each(function (i) {
if (i ==5||i==6||i==7||i==9||i==10) {//第5.6.7.9.10列的下拉筛选框
var column = api.column(i);
var $span = $('<span class="addselect"></span>').appendTo($(column.footer()));//▾
var select = $('<select style="width: 80px;"><option value="">All</option></select>')
.appendTo($(column.footer()))
.on('click', function (evt) {
evt.stopPropagation();
var val = $.fn.dataTable.util.escapeRegex(
$(this).val()
);
column
.search(val ? '^' + val + '$' : '', true, false)
.draw();
});
if(i ==5){
column.data().unique().sort().each(function (d, j) {
function delHtmlTag(str) {
return str.replace(/<[^>]+>/g, "");//去掉html标签
}
d = delHtmlTag(d);
select.append('<option value="' + d + '">' + d + '</option>');
$span.append(select);
});
}else{
//得到render的值
var data = oTable.cells( '', i ).render( 'display' );
var set = new Array();
data.unique().sort().each(function (d, j) {
function delHtmlTag(str) {
return str.replace(/<[^>]+>/g, "");//去掉html标签
}
d = delHtmlTag(d);
if(set.indexOf(d)==-1&&d!=""){
set.push(d);
select.append('<option value="' + d + '">' + d + '</option>');
}
$span.append(select);
});
// console.log(set);
}
}
});
//(底部统计某列状态)
var ary=new Array();
var data = oTable.cells( '', 7 ).render( 'display' );
data.sort().each(function (d, j) {
function delHtmlTag(str) {
return str.replace(/<[^>]+>/g, "");//去掉html标签
}
//d = delHtmlTag(d);
//console.log(d);
if(ary.hasOwnProperty(d)){
ary[d]=ary[d]+1;
}else{
ary[d]=1;
}
});
// console.log(ary);
var html="";
for (x in ary){
html +=x+":"+ary[x]+" ";
}
$("#showstate").html(html);
// alert(html)
},
//点击修改某列
"fnDrawCallback": function (data, x) {
$('#example tbody td.selectTd').editable("changeGearman?service=fetcher",
{
loadurl: 'getGearManNameList',
//data:{"10":"10","20":"20","30":"30"},
type: 'select',
submit : '确定',
indicator : '请等待...',
submitdata: { _method: "post"},
tooltip : '点击编辑...'
});
// //点击修改某列(扩展列)
$('#example tbody td.selectTdx').editable("changeExtend?service=fetcher",
{
loadurl: 'getExtendNameList',
//data:{"10":"10","20":"20","30":"30"},
type: 'select',
submit : '确定',
indicator : '请等待...',
submitdata: { _method: "post"},
tooltip : '点击编辑...'
});
},
});
//显示隐藏列
$('.toggle-vis').on('change', function (e) {
e.preventDefault();
console.log($(this).attr('data-column'));
var column = $('#example').DataTable().column($(this).attr('data-column'));
column.visible(!column.visible());
});
//显示选项
$('#showcol').click(function () {
$('.showul').toggle();
});
//添加索引列
oTable.on('order.dt search.dt',
function () {
$('#example').DataTable().column(0, {
search: 'applied',
order: 'applied'
}).nodes().each(function (cell, i) {
cell.innerHTML = i + 1;
});
}).draw();
//表格错误事件
$.fn.dataTable.ext.errMode = 'none';
$('#example')
.on( 'error.dt', function ( e, settings, techNote, message ) {
alert( '加载出错,请刷新页面重试!', message );
}).DataTable();
//修改列表分页长度,更新列表
$("select[name='example_length']").on("change",function(){
$('#example').DataTable().draw();
})
<div style=" position:relative; z-index:999;">
<button id="showcol" class="btn btn-inverse btn-sm" title="隐藏/显示">列字段显示/隐藏 <span class="glyphicon glyphicon-list"></span></button>
<ul class="showul"
style=" list-style:none;display:none; position:absolute; left:80px; top:10px; background:#FFFFFF; border:1px solid #ccc; width:200px;">
<li><input type="checkbox" class="toggle-vis" data-column="2" checked/>
外网IP</li>
<li><input type="checkbox" class="toggle-vis" data-column="3" checked/>
主机名</li>
<li><input type="checkbox" class="toggle-vis" data-column="4" checked/>
内网IP</li>
<li><input type="checkbox" class="toggle-vis" data-column="5" checked/>
机房</li>
<li><input type="checkbox" class="toggle-vis" data-column="6" checked/>
存活?</li>
<li><input type="checkbox" class="toggle-vis" data-column="7" checked/>
状态</li>
<li><input type="checkbox" class="toggle-vis" data-column="8" checked/>
控制</li>
<li><input type="checkbox" class="toggle-vis" data-column="9" checked/>
GearMan组</li>
<li><input type="checkbox" class="toggle-vis" data-column="10" checked/>
版本</li>
<li><input type="checkbox" class="toggle-vis" data-column="11" checked/>
微博GearMan组</li>
<li><input type="checkbox" class="toggle-vis" data-column="12" checked/>
扩展组</li>
<li><input type="checkbox" class="toggle-vis" data-column="13" checked/>
Pid/运行时间</li>
</ul>
</div>
可能比较乱,就这样吧,如果有什么要帮助,请留言,谢谢