前言

在后台管理系统开发中,难免会出现列数太多的情况,这里提供一个解决方案:用户设置显示哪些列,每个用户互不影响,并且可以根据用户的习惯设置列的排序。

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

如果您觉得阅读本文对您有帮助,请点一下“推荐”按钮,您的“推荐”将是我最大的写作能力!

基于DataTables实现根据每个用户动态显示隐藏列,可排序的更多相关文章

  1. datatable 动态显示/隐藏列

    这个例子演示了 column().visible()方法来隐藏显示列,通过点击列按钮动态切换 <table id="example" class="display& ...

  2. extjs中gridpanel动态显示/隐藏列

    在extjs3中,大家知道用 myGrid.getColumnModel().setHidden(i,true);但到了4.0后,已经没有getColumnModel这个方法了,我们在Ext.pane ...

  3. datatables隐藏列与createdRow渲染bootstrapSwitch形成的BUG

    背景: 昨天写了一个页面用于规则库的增删改查. 数据使用datatables渲染,后端返回数据由前端进行一次性渲染和分页. 隐藏列: 排序的ID不展示,但是排序又想按照ID来排,所以把ID单独作为一列 ...

  4. DataTables学习:从最基本的入门静态页面,使用ajax调用Json本地数据源实现前端开发深入学习,根据后台数据接口替换掉本地的json本地数据,以及报错的处理地方,8个例子(显示行附加信息,回调使用api,动态显示和隐藏列...),详细教程

    一.DataTables  个人觉得学习一门新的插件或者技术时候,官方文档是最根本的,入门最快的地方,但是有时候看完官方文档,一步步的动手写例子,总会出现各种莫名其妙的错误,需要我们很好的进行研究出错 ...

  5. Sharepoint 2010 根据用户权限隐藏Ribbon菜单(利用css)

    本文介绍的是根据用户权限隐藏整个Ribbon菜单项. 操作环境:Windows Server 2008 r2+ SharePoint 2010 1.关于SharePoint  权限详细请参考:http ...

  6. 【Android】实现动态显示隐藏密码输入框的内容

    在设置输入密码框时,有些时候需要按钮控制输入的是“明文”或者“暗文”. 这里提供一种Android实现动态显示隐藏密码输入框的内容的方法: 主要是通过设置EditText的setTransformat ...

  7. 基于vue.js的简单用户管理

    功能描述:添加.修改.搜索过滤 效果图: <!DOCTYPE html> <html lang="en"> <head> <title&g ...

  8. 基于SpringSecurity和JWT的用户访问认证和授权

    发布时间:2018-12-03   技术:springsecurity+jwt+java+jpa+mysql+mysql workBench   概述 基于SpringSecurity和JWT的用户访 ...

  9. 基于微信小程序的用户列表点赞功能

    代码地址如下:http://www.demodashi.com/demo/13997.html 一.前言 (1).适合人群 1.微信小程序开发者 2.前端工程师 3.想入门学习小程序开发的人员 4.想 ...

随机推荐

  1. 边缘计算 VS 云计算,谁才是未来?

    计算是互联网中一个永恒的话题,设备的所有运行都可以看成是 0 和 1 的运算.在计算中近些年有两个越来越响亮的技术:云计算和边缘计算.现如今是云计算方兴未艾,边缘计算已经有了燎原之势,本文将对这两种技 ...

  2. sequelize问题集锦

    查询: 查询在指定时间范围内的所有数据 options.where.crawl_time = { $lt: new Date('2017-04-08 00:00:00'), $gt: new Date ...

  3. 功能代码(1)---通过Jquery来处理复选框

    实现以下功能: 1:选中第一个复选框,那么下面所有的复选框都选中,去除选中第一个复选框,下面的都不选中 2:当点击全选按钮,上面足球.篮球.游泳.唱歌 全部选中 3:当点击全不选按钮,上面四个全部取消 ...

  4. C#版(击败97.76%的提交) - Leetcode 557. 反转字符串中的单词 III - 题解

    版权声明: 本文为博主Bravo Yeung(知乎UserName同名)的原创文章,欲转载请先私信获博主允许,转载时请附上网址 http://blog.csdn.net/lzuacm. Leetcod ...

  5. android 垃圾回收机制

    1.垃圾收集算法的核心思想 java语言提供了自动的GC机制,系统会经常检查内存,采用对象引用计数的方式,将引用次数为0的对象回收.这样可以防止两个危险:(1)防止无用对象占用内存资源 (2)防止有用 ...

  6. Android--逐帧动画FrameAnimation

    前言 开门见山,本篇博客讲解一下如何在Android平台下播放一个逐帧动画.逐帧动画在Android下可以通过代码和XML文件两种方式定义,本篇博客都将讲到,最后将以一个简单的Demo来演示两种方式定 ...

  7. (四)五种IO模型

    基本概念 我们之前编写的套接字程序都是阻塞式的,其实这也是默认的形式.现在我们需要明确一些概念: 用户空间和内核空间 首先要明确,用户启动的应用程序在系统中以一个进程的形式存在,而无论对于网络数据还是 ...

  8. Linux基础知识第九讲,linux中的解压缩,以及软件安装命令

    目录 Linux基础知识第九讲,linux中的解压缩,以及软件安装命令 一丶Linux Mac Windows下的压缩格式简介 2.压缩以及解压缩 3.linux中的软件安装以及卸载 1.apt进行安 ...

  9. ASP.NET Core 2.1 : 十三.httpClient.GetAsync 报SSL错误的问题

    不知什么时候 ,出现了这样的一个奇怪问题,简单的httpClient.GetAsync("xxxx")居然报错了.(ASP.NET Core 系列目录) 一.问题描述 把原来的程序 ...

  10. 结合JDK源码看设计模式——享元模式

    前言 在说享元模式之前,你一定见到过这样的面试题 public class Test { public static void main(String[] args) { Integer a=Inte ...