?

前言

在后臺管理系統(tǒng)開發(fā)中，難免會出現(xiàn)列數(shù)太多的情況，這里提供一個解決方案：用戶設(shè)置顯示哪些列，每個用戶互不影響，并且可以根據(jù)用戶的習(xí)慣設(shè)置列的排序。

1、演示

2、html代碼說明

3、javascript代碼說明

4、總結(jié)

?

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、調(diào)用

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

customColumns對象是必傳的。

customColumns.pageId主要是存取數(shù)據(jù)用的，保證每一個實例的設(shè)置區(qū)分開來。

customColumns.pageFieleList是每個實例設(shè)置的數(shù)據(jù)，格式如下：

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

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

customColumns.aoColumnsDefs跟customColumns.columns同理。

?

2、pageSearch里面的代碼

!(function () {function pageSearch(options){this.table = null;this.options = $.extend({container:'#my-page',//容器settingBtn:'#setting',//容器內(nèi)的按鈕table:'#page-table',//容器內(nèi)的table customColumns:{pageId: '',//(必填)自定義列需要用到的id 必須唯一pageFieldList: [],//(必填)頁面字段配置columns: null,//列配置項columnDefaults: null},DataTable:{}//保留dataTables參數(shù) },options);this.main();}$.extend(pageSearch.prototype,{main:function(){this.renderThead();this.setDefault();this.initTable();this.events();},// 對datatables設(shè)置默認參數(shù)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 // 表格里使用滾動 });},// 初始化dataTablesinitTable: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;//設(shè)置$(opts.settingBtn,opts.container).click(function(){that.actionSetting();});},// 把數(shù)據(jù)轉(zhuǎn)成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);},// 開始設(shè)置actionSetting:function(){var that = this;var list = this.options.customColumns.pageFieldList;dialog({title:'設(shè)置',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，數(shù)據(jù)保存失敗！')}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重新渲染dataTablesthat.table && (that.table = $(that.options.table,that.options.container).DataTable($.extend(that.columnOptions, that.options.DataTable)));//關(guān)閉窗口this.close().remove();}return false;},cancelValue:'取消',cancel:true}).showModal();},// 生成彈窗的內(nèi)容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是實現(xiàn)功能的核心。實現(xiàn)了幾個方法：

1、main是程序的入口

2、setDefault對DataTables的默認設(shè)置，減少重復(fù)設(shè)置的煩惱。

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

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

5、handleDataTableOption將customColumns.columns和customColumns.aoColumnsDefs轉(zhuǎn)成DataTables的columns和aoColumnsDefs。

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

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

?

4、總結(jié)

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

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

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

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

?

轉(zhuǎn)載于:https://www.cnblogs.com/wy99/p/10334107.html

總結(jié)

以上是生活随笔為你收集整理的基于DataTables实现根据每个用户动态显示隐藏列，可排序的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。