它是一个基于jquery的一个表格控件。可以分页 搜索 排序 格式化 等等。
1 首先我们在页面中引入js css这些
<script src="~/Content/adminlte30/plugins/jquery/jquery.min.js"></script>
<!-- Bootstrap 4 -->
<script src="~/Content/adminlte30/plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
<!-- DataTables -->
<script src="~/Content/adminlte30/plugins/datatables/jquery.dataTables.js"></script>
<script src="/include/plugins/datatables/dataTables.bootstrap4.js"></script>
<!-- SlimScroll -->
<script src="~/Content/adminlte30/plugins/slimScroll/jquery.slimscroll.min.js"></script>
<!-- FastClick -->
<script src="~/Content/adminlte30/plugins/fastclick/fastclick.js"></script>
<!-- AdminLTE App -->
<script src="~/Content/adminlte30/dist/js/adminlte.min.js"></script>
<!-- AdminLTE for demo purposes -->
<script src="~/Content/adminlte30/dist/js/demo.js"></script>
2 页面添加一个table
<table id="example2" class="table table-bordered table-hover">
<thead>
<tr>
<th>ID</th>
<th>标题</th>
<th>时间</th>
<th>操作</th>
</tr>
</thead>
</table>
3 初始化datatables
<script>
$(function () {
$('#example2').DataTable({
paging: true,
lengthChange: false,
searching: false,
ordering: true,
info: true,
autoWidth: false,
serverSide: true,
iDisplayLength: 15,
iDisplayStart: 0,
bStateSave: true,
pagingType: "full_numbers",
order: [[0, "desc"]],
aoColumnDefs: [
{ "bSortable": false, "aTargets": [1, 2] }
],
ajax: {
// url可以直接指定远程的json文件，或是MVC的请求地址 /Controller/Action
url: "/role/load",
type: 'POST',
// 传给服务器的数据，可以添加我们自己的查询参数
data: function (param) {
param.opportunityNO = 'key';
return param;
}
},
language: { //国际化配置
"sProcessing": "正在获取数据，请稍后...",
"sLengthMenu": "显示 _MENU_条",
"sZeroRecords": "无数据",
"sInfo": "从 _START_到 _END_ 条记录 总记录数为 _TOTAL_ 条",
"sInfoEmpty": "记录数为0",
"sInfoFiltered": "(全部记录数_MAX_条)",
"sInfoPostFix": "",
"sSearch": "搜索",
"sUrl": "",
"oPaginate": {
"sFirst": "第一页",
"sPrevious": "上一页",
"sNext": "下一页",
"sLast": "最后一页"
}
},
columns: [
{ "data": "ID" },
{ "data": "Name" },
{
"data": function (obj) {
return obj.AddTime;
}
},
{
"data": function (obj) {
return '<button type="button" class="btn btn-default btn-xs" onclick="$(\'#roleid\').val(' + obj.ID + ');$(\'#myModal2\').modal(\'show\');">配置权限</button>';
}
}
]
});
});
</script>
[HttpPost]
public ActionResult Load()
{
var context = new Adminlte30Entities();
var list = context.ArticleSet.ToList();
return Json(new
{
draw = ConvertDateTimeToInt(DateTime.Now),
recordsTotal = list.Count,
recordsFiltered = list.Count,
data = list.Take(10).Select(m => new { m.Id, m.Title, m.AddTime })
}, JsonRequestBehavior.AllowGet);
}
private long ConvertDateTimeToInt(System.DateTime time)
{
System.DateTime startTime = TimeZone.CurrentTimeZone.ToLocalTime(new System.DateTime(1970, 1, 1, 0, 0, 0, 0));
long t = (time.Ticks - startTime.Ticks) / 10000; //除10000调整为13位
return t;
}
关于分页
一旦我能配置了datatable的分页 paging true的时候
每次加载数据 就会往服务器发送，我们就可以在action这边获取start 和length
order[0][dir]:
desc
start:
0
length:
15
search[value]:
search[regex]:
false
opportunityNO:
key