datatalble总结（一）

基本配置信息

"dom": '<"top"f >rt<"bottom"ilp><"clear">',//dom定位 "dom": 'tiprl',//自定义显示项 //"dom":'<"domab"f>', "scrollY": "220px",//dt高度 "lengthMenu": [ [8, 6, 8, -1], [4, 6, 8, "All"] ],//每页显示条数设置 "lengthChange": false,//是否允许用户自定义显示数量 "bPaginate": true, //翻页功能 "bFilter": false, //列筛序功能 "searching": true,//本地搜索 "ordering": true, //排序功能 "Info": true,//页脚信息 "autoWidth": true,//自动宽度 "oLanguage": {//国际语言转化 "oAria": { "sSortAscending": " - click/return to sort ascending", "sSortDescending": " - click/return to sort descending" }, "sLengthMenu": "显示 _MENU_ 记录", "sZeroRecords": "对不起，查询不到任何相关数据", "sEmptyTable": "未有相关数据", "sLoadingRecords": "正在加载数据-请等待...", "sInfo": "当前显示 _START_ 到 _END_ 条，共 _TOTAL_ 条记录。", "sInfoEmpty": "当前显示0到0条，共0条记录", "sInfoFiltered": "（数据库中共为 _MAX_ 条记录）", "sProcessing": "<img src='../resources/user_share/row_details/select2-spinner.gif'/> 正在加载数据...", "sSearch": "模糊查询：", "sUrl": "", //多语言配置文件，可将oLanguage的设置放在一个txt文件中，例：Javascript/datatable/dtCH.txt "oPaginate": { "sFirst": "首页", "sPrevious": " 上一页 ", "sNext": " 下一页 ", "sLast": " 尾页 " } }, "columnDefs": [ { orderable: false, targets: 0 }, { orderable: false, targets: 1 } ],//第一列与第二列禁止排序 "order": [ [0, null] ],//第一列排序图标改为默认

列筛选

initComplete: function () {//列筛选 var api = this.api(); api.columns().indexes().flatten().each(function (i) { if (i != 0 && i != 1) {//删除第一列与第二列的筛选框 var column = api.column(i); var $span = $('<span class="addselect">▾</span>').appendTo($(column.header())) var select = $('<select><option value="">All</option></select>') .appendTo($(column.header())) .on('click', function (evt) { evt.stopPropagation(); var val = $.fn.dataTable.util.escapeRegex( $(this).val() ); column .search(val ? '^' + val + '$' : '', true, false) .draw(); }); 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) }); } }); }

添加索引列

table.on('order.dt search.dt', function () { table.column(0, { search: 'applied', order: 'applied' }).nodes().each(function (cell, i) { cell.innerHTML = i + 1; }); }).draw();

自定义搜索

$('.dsearch').on('keyup click', function () { var tsval = $(".dsearch").val() table.search(tsval, false, false).draw(); });//.dsearch为搜索框class值

实现checkbox全选

$("#checkAll").on("click", function () { if ($(this).prop("checked") === true) { $("input[name='checkList']").prop("checked", $(this).prop("checked")); $('#example tbody tr').addClass('selected'); } else { $("input[name='checkList']").prop("checked", false); $('#example tbody tr').removeClass('selected'); } });//checkAll为全选框ID；checkList为每个选框的name值

显示隐藏列

$('.toggle-vis').on('change', function (e) { e.preventDefault(); console.log($(this).attr('data-column')); var column = table.column($(this).attr('data-column')); column.visible(!column.visible()); });//toggle-vis为表头每个type为checkbox的input的class值

删除选中行

$('#example tbody').on('click', 'tr input[name="checkList"]', function () { var $tr = $(this).parents('tr'); $tr.toggleClass('selected'); var $tmp = $('[name=checkList]:checkbox'); $('#checkAll').prop('checked', $tmp.length == $tmp.filter(':checked').length); }); $('#button').click(function () { table.row('.selected').remove().draw(false); }); $('.showcol').click(function () { $('.showul').toggle(); })//showcol列段显示隐藏的class值

获取表格宽度赋值给右侧弹出层

wt = $('.wt100').width(); $('.showslider').css('right', -wt); //关闭右侧弹出层 $('.closediv').click(function () { $(this).parent('.showslider').animate({ right: -wt }, 200) $('.clickdom').attr('isclick', true) }); })//.wt100表格外层div的class值.showslider弹出层class值clickdom被点击class值

右侧弹出详情层

var flag=false; function clickDom(obj){ var $par=$(obj).parents('#example_wrapper').siblings('.showslider') var isattr=$(obj).attr('isclick'); if(isattr=="true"){ if(flag){ $par.animate({ right:-wt },200) flag=!flag } else{ $par.animate({ right:0 },200) flag=!flag } } $('.clickdom').attr('isclick',false) $(obj).attr('isclick',true) }

右侧点击弹出层代码

function clickDom(obj) { var $par = $(obj).parents('#example_wrapper').siblings('.showslider') var isattr = $(obj).attr('isclick'); if (isattr == "false") { } else { $par.animate({ right: -wt }, 200) $par.animate({ right: 0 }, 400) $('.clickdom').attr('isclick', true) $(obj).attr('isclick', false) } }//showslider弹出层class