基于DataTables实现根据每个用户的设置动态显示隐藏列，支持排序

前言

在后台管理系统开发中，难免会出现列数太多的情况，这里提供一个解决方案：用户设置显示哪些列，每个用户互不影响，并且可以根据用户的习惯设置列的排序。
1、演示
2、html代码说明
3、javascript代码说明
4、总结

演示

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。

javascript代码

调用

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同理。

pageSearch里面的代码

!(f