基於DataTables實現根據每個用戶動態顯示隱藏列，可排序

 

前言

在后台管理系統開發中，難免會出現列數太多的情況，這里提供一個解決方案：用戶設置顯示哪些列，每個用戶互不影響，並且可以根據用戶的習慣設置列的排序。

1、演示

2、html代碼說明

3、javascript代碼說明

4、總結

 

1、演示

 

2、HTML代碼

 

<link rel="stylesheet" type="text/css" href="DataTables-1.10.15//media/css/jquery.dataTables.css">

<script type="text/javascript" language="javascript" src="DataTables-1.10.15/media/js/jquery.js"></script>

<script type="text/javascript" language="javascript" src="DataTables-1.10.15/media/js/jquery.dataTables.js"></script>

 

<table id="page-table" class="table table-bordered table-hover">

    <thead></thead>

    <tbody></tbody>

</table>

 

引入jquery跟DataTables即可，然后再寫一個table。

 

3、javascript代碼

 

1、調用

new $.pageSearch({ customColumns:{ pageId: pageId,// 唯一ID
 pageFieldList:pageFieldList, // dataTables的columns參數寫這里
 columns:{ column1:{ width:200 } }, // dataTables的aoColumnDefs參數寫這里
 aoColumnDefs:{ column2:{ width:200, mRender: function (data, type, full) { return 'custom ' + data; } } } }, DataTable:{// 這里保留了DataTables的參數
 data: dataList } });

customColumns對象是必傳的。

customColumns.pageId主要是存取數據用的，保證每一個實例的設置區分開來。

customColumns.pageFieleList是每個實例設置的數據，格式如下：

var pageFieldList = [{ display: true, displayName: 'Column1', fieldName: 'column1' }];

customColumns.columns是dataTables的columns，將原來的數組改成了對象，以data為屬性名，其他屬性保留。

customColumns.aoColumnsDefs跟customColumns.columns同理。

 

2、pageSearch里面的代碼

!(function () { function pageSearch(options){ this.table = null; this.options = $.extend({ container:'#my-page',//容器
    settingBtn:'#setting',//容器內的按鈕
    table:'#page-table',//容器內的table
 customColumns:{ pageId: '',//(必填)自定義列需要用到的id 必須唯一
      pageFieldList: [],//(必填)頁面字段配置
      columns: null,//列配置項
      columnDefaults: null }, DataTable:{}//保留dataTables參數
 },options); this.main(); } $.extend(pageSearch.prototype,{ main:function(){ this.renderThead(); this.setDefault(); this.initTable(); this.events(); }, // 對datatables設置默認參數
    setDefault:function(){ $.extend($.fn.dataTable.defaults,{ searching: false,// 禁用搜索
        ordering: false,// 禁用排序
        dom: "<'row'<'col-sm-12'tr>>" + "<'row'<'col-sm-5 page-info'li><'col-sm-7'p>>", scrollY: 400 // 表格里使用滾動
 }); }, // 初始化dataTables
    initTable:function(){ var opts = this.options; var formatColumns = this.handleDataTableOption(); var dataTablesOption = $.extend({ columns:formatColumns.columns, aoColumnDefs:formatColumns.aoColumnDefs },opts.DataTable); this.table = $(opts.table,opts.container).DataTable(dataTablesOption); }, // 事件綁定
    events:function(){ var that = this; var opts = this.options; //設置
      $(opts.settingBtn,opts.container).click(function(){ that.actionSetting(); }); }, // 把數據轉成dataTables需要的格式
    handleDataTableOption:function(){ var customColumns = this.options.customColumns; var colums = []; var columnDefs = []; $.each(customColumns.pageFieldList, function (i, fieldInfo) { var fieldName = fieldInfo.fieldName; var columnDefObj = customColumns.columnDefaults && customColumns.columnDefaults[fieldName]; colums.push($.extend({ data: fieldName, visible: fieldInfo.display }, customColumns.columns ? customColumns.columns[fieldName] : {})); if (columnDefObj) { columnDefs.push($.extend({ aTargets: [i] }, columnDefObj)); } }); return { columns: colums, aoColumnDefs: columnDefs } }, // 渲染表頭
    renderThead:function(){ var that = this; var customColumns = this.options.customColumns; var thead = '<tr>'; $.each(customColumns.pageFieldList, function (i, fieldInfo) { if (fieldInfo.display) { thead += '<th title="' + fieldInfo.displayName + '">' + fieldInfo.displayName + '</th>'; } else { thead += '<th style="display:none;" title="' + fieldInfo.displayName + '">' + fieldInfo.displayName + '</th>'; } }); thead += '</tr>'; $('thead', that.options.table).html(thead); }, // 開始設置
    actionSetting:function(){ var that = this; var list = this.options.customColumns.pageFieldList; dialog({ title:'設置', content:this.getDialogContent(list), width:300, height:400, onshow:function(){ $('#sortable',this.node).sortable().disableSelection(); }, skin:'scroll-y', okValue:'保存', ok:function(){ var fieldList = []; $('li',this.node).each(function(){ var data = $(this).data(); fieldList.push({ display: $('[name="display"]',this).prop('checked'), displayName: data.displayName, fieldName: data.fieldName }); }); if(!localStorage){ alert('抱歉，瀏覽器不支持localStorage，數據保存失敗！') }else{ // 這里做本地緩存，可以換成ajax
 localStorage.setItem(that.options.customColumns.pageId,JSON.stringify(fieldList)); alert('保存成功'); that.options.customColumns.pageFieldList = fieldList; that.columnOptions = that.handleDataTableOption(); // 銷毀datatables實例
            that.table && that.table.destroy(); // 重繪表頭
 that.renderThead(); // 用新的options重新渲染dataTables
            that.table && (that.table = $(that.options.table,that.options.container).DataTable($.extend(that.columnOptions, that.options.DataTable))); //關閉窗口
            this.close().remove(); } return false; }, cancelValue:'取消', cancel:true }).showModal(); }, // 生成彈窗的內容
    getDialogContent:function(list){ var html = ''; html += '<h4 class="green">可拖拽排序列表</h4>'; html += '<ul id="sortable">'; for(var i = 0;i < list.length;i++){ html += '<li class="ui-state-default" data-display-name="' + list[i].displayName + '" data-field-name="' + list[i].fieldName + '">'; html += '<span>' + list[i].displayName + '</span>'; html += '<input type="checkbox" name="display" title="是否展示" ' + (list[i].display ? 'checked="checked"' : '') + ' />'; html += '</li>'; } html += '</ul>'; return html; } }); $.pageSearch = pageSearch; })();

$.pageSearch是實現功能的核心。實現了幾個方法：

1、main是程序的入口

2、setDefault對DataTables的默認設置，減少重復設置的煩惱。

3、initTable是開始對table實例化成DataTables實例。

4、events所有事件都寫在這里。

5、handleDataTableOption將customColumns.columns和customColumns.aoColumnsDefs轉成DataTables的columns和aoColumnsDefs。

6、renderThead因表頭的排序會改變，所以要重新渲染新的表頭。

7、actionSetting是對設置的保存，源碼中使用localStorage保存，大家也可以改成ajax保存。

 

4、總結

上述只是挑選部分重要的代碼，如需查看完整代碼請到我的github上查看。

完整源碼地址：https://github.com/ll527563266/datatables-dynamic-columns

在線預覽地址：https://ll527563266.github.io/datatables-dynamic-columns

如果您覺得閱讀本文對您有幫助，請點一下“推薦”按鈕，您的“推薦”將是我最大的寫作能力！