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

中文社区：

http://datatables.club/

基于Bootstrap样式：

https://datatables.net/examples/styling/bootstrap.html

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

• 分页，即时搜索和排序
• 几乎支持任何数据源：DOM， javascript， Ajax 和 服务器处理
• 支持不同主题 DataTables, jQuery UI, Bootstrap, Foundation
• 各式各样的扩展: Editor, TableTools, FixedColumns ……
• 丰富多样的option和强大的API
• 支持国际化
• 超过2900+个单元测试
• 免费开源 （ MIT license ）！ 商业支持
• 更多特性请到官网查看

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

仅使用原生表格，

    <link href="~/Scripts/table/js/jquery.dataTables.min.css" rel="stylesheet" />
    <script src="~/Scripts/table/js/jquery.dataTables.min.js"></script>

更多是使用Bootstrap的样式：

@*注意，css样式需要更改，不能同时引用*@
@*<link href="~/Scripts/table/js/jquery.dataTables.min.css" rel="stylesheet" />*@
<script src="~/Scripts/table/js/jquery.dataTables.min.js"></script>
<link href="~/Scripts/table/js/dataTables.bootstrap4.css" rel="stylesheet" />
<script src="~/Scripts/table/js/dataTables.bootstrap.min.js"></script>

简单Demo 实例：

更多Demo源代码：http://git.oschina.net/tiama3798/BootstrapBack_Demo/tree/JQuery.dataTables/

1.前台定义：

<table id="example1" class="table table-hover table-striped table-bordered">
    <thead>
        <tr>
            <th>编号</th>
            <th>姓名</th>
            <th>性别</th>
            <th>生日</th>
            <th>班级</th>
        </tr>
    </thead>
</table>

$(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.后台处理：

/// <summary>
/// 获取所有的学生列表json数据
/// </summary>
/// <param name="start">分的时候，数据的开始位置</param>
/// <param name="length">分页时，当前页数据量，如果不分页则length=-1</param>
/// <param name="draw">当前绘制的页索引</param>
/// <returns></returns>
public string GetList(int start, int length, int draw)
{
    length = length <= 0 ? 10 : length;
    draw = draw <= 0 ? 1 : draw;

    /******组合查询实例********/
    var query = db.Queryable<student>();
    //配置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<student> 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();
}

显示结果：

更多：
Framework7特色的HTML框架WebApp开源前端框架

Web前端代码编辑器之Atom整理

Ionic相关整理