JQuery.dataTables免费开源的数据表格插件-白红宇

JQuery.dataTables免费开源的数据表格插件

阅读量：4288 次

发布时间：2019-05-27

本文共 2738 字，大约阅读时间需要 9 分钟。

中文社区：

基于Bootstrap样式：

Datatables是一款jquery表格插件。它是一个高度灵活的工具，可以将任何HTML表格添加高级的交互功能。

分页，即时搜索和排序

几乎支持任何数据源：DOM， javascript， Ajax 和服务器处理

支持不同主题 DataTables, jQuery UI, Bootstrap, Foundation

各式各样的扩展: Editor, TableTools, FixedColumns ……

丰富多样的option和强大的API

支持国际化

超过2900+个单元测试

免费开源（）！

更多特性请到官网查看

引用说明：前提是已经引用了JQuery插件

仅使用原生表格，

更多是使用Bootstrap的样式：

@*注意，css样式需要更改，不能同时引用*@@*
   *@

简单Demo 实例：

更多Demo源代码：

1.前台定义：


   
                                       编号                   姓名                   性别                   生日                   班级

$(function () {    //注意方法名为DataTable    var table = $('#example1').DataTable({        processing: true,//是否使用进度条        serverSide: true,//是否启用数据库加载        lengthChange: true,//是否允许用户自定义显示页数据量        lengthMenu: [            5,10,15,30,50        ],        //指定语言包        language: {            url:'/scripts/table/js/lan.json'        },        ajax: {            url: '/tableone/getlist',            type: 'post'        },        //指定列绑定的字段        columns: [            { data: 'sno' },            { data: 'sname' },            { data: 'ssex' },            { data: 'sbirthday' },            { data: 'class' }        ],        pageLength:5,        order: [            [3, 'desc']        ]    });});

2.后台处理：

/// /// 获取所有的学生列表json数据/// 
/// 分的时候，数据的开始位置/// 分页时，当前页数据量，如果不分页则length=-1/// 当前绘制的页索引/// 
   public string GetList(int start, int length, int draw){    length = length <= 0 ? 10 : length;    draw = draw <= 0 ? 1 : draw;    /******组合查询实例********/    var query = db.Queryable
   
    ();    //配置json 序列化的时间文件    db.SerializerDateFormat = "yyy年MM月dd日";    //筛选----编号或姓名    string search = ReqHelper.GetString("search[value]").Trim();    if (string.IsNullOrEmpty(search) == false)    {        query = query.Where(q => q.sno.Contains(search) || q.sname.Contains(search));    }    int allCount = query.Count();    //排序---根据前台参数排序    //query = query.OrderBy("sbirthday desc");    string orderColumnIndex = ReqHelper.GetString("order[0][column]");    string orderDir = ReqHelper.GetString("order[0][dir]", "asc");    if (string.IsNullOrEmpty(orderColumnIndex) == false)    {        string orderColumnName = ReqHelper.GetString(string.Format("columns[{0}][data]", orderColumnIndex));        query = query.OrderBy(orderColumnName + " " + orderDir);    }    else    {        query = query.OrderBy("sbirthday desc");    }    //分页    List
    
      list = query.Skip(start).Take(length).ToList();    //前台的数据格式    object result = new    {        draw = draw,        recordsTotal = allCount,        recordsFiltered = allCount,        data = list    };    //使用SqlSugar序列化，处理日期格式    return SqlSugar.JsonConverter.Serialize(result, true);    //return result.ToJsonString();}

显示结果：