JQuery.dataTables的数据表格插件示例

基于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插件

仅使用原生表格，

[html]view plain copy
<link href="~/Scripts/table/js/jquery.dataTables.min.css" rel="stylesheet" />  
<script src="~/Scripts/table/js/jquery.dataTables.min.js"></script>  

更多是使用Bootstrap的样式：

[html]view plain copy
@*注意，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 实例：

1.前台定义：

[html]view plain copy
<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>  

[html]view plain copy
$(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.后台处理：

[csharp]view plain copy
/// <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();  
}  

显示结果：

JQuery.dataTables的数据表格插件示例

猜你喜欢