中文社区:
基于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();
}
显示结果: