目录:
- 我要说两句
- 前端代码
- 后端代码
我要说两句
本人上手Web也是时间不长,然后又想快速的出成果,所以就去问度娘和谷歌,最后就选择了前端用bootstrap +jquery,后端直接MVC,在前端能用插件就绝不自己写,然后机缘巧合之下我和 datatables相遇了,用着非常顺手,但是遇到服务器端分页却让我抓狂了2天
前端代码
参数说明
“bServerSide”: true, //指定从服务器端获取数据
“sAjaxSource”: surl, //获取数据的url (一般是action)
“fnServerData”: function(){…} //获取数据的处理函数
sSource:”ControllerName/ActionName” //AjaxSource中指定的地址
aoData: //DataTables定义的参数,是一个数组
fnCallback://服务器返回数据后的处理函数,不一定要实现它,但是你一定要将它放在“fnServerData”参数中
var table;
$(document).ready(function () {
table = $('#tableGetListCustomerId').DataTable({
"language": {
"sProcessing": "处理中...",
"sLengthMenu": "显示 _MENU_ 项结果",
"sZeroRecords": "没有匹配结果",
"sInfo": "显示第 _START_ 至 _END_ 项结果,共 _TOTAL_ 项",
"sInfoEmpty": "显示第 0 至 0 项结果,共 0 项",
"sInfoFiltered": "(由 _MAX_ 项结果过滤)",
"sInfoPostFix": "",
"sSearch": "搜索:",
"sUrl": "",
"sEmptyTable": "表中数据为空",
"sLoadingRecords": "载入中...",
"sInfoThousands": ",",
"oPaginate": {
"sFirst": "首页",
"sPrevious": "上页",
"sNext": "下页",
"sLast": "末页"
}
},
"sAjaxSource":"ControllerName/ActionName",
"searching": false,
"serverSide": true,
"fnServerData": function (sSource, aoData, fnCallback) {
aoData.push({ "name": "CUSTOMER_ID", "value": $("#txtCustomerId").val() });
aoData.push({ "name": "CUSTOMER_NAME", "value": $("#txtCustomerName").val() });
$.ajax({
"dataType": 'json',
"type": "POST",
"url": sSource,
"data": aoData,
"success": fnCallback
})
},
"paging": true,
"lengthChange": false,
"ordering": true,
"iDisplayLength": 10,
"info": true,
"autoWidth": false,
"columns": [
{ "data": "clumnName1" },
{ "data": "clumnName2" }
]
});
$('#tableGetListCustomerId tbody').on('click', 'tr', function () {
if ($(this).hasClass('row_selected')) {
$(this).removeClass('row_selected');
}
else {
table.$('tr.row_selected').removeClass('row_selected');
$(this).addClass('row_selected');
}
});
});
后端代码
public JsonResult GetListPage(string CUSTOMER_ID, string CUSTOMER_NAME, int sEcho, int iDisplayStart, int iDisplayLength)
{
int iTotalRecords = 0;
int iTotalDisplayRecords=0;
List queryList = new List();
queryList = daoCustomerId.CustomerIdList().Where(a => a.CUSTOMER_ID != “”).ToList();
iTotalRecords = queryList.Count;
if (!string.IsNullOrEmpty(CUSTOMER_ID))
queryList = queryList.Where(a => a.CUSTOMER_ID.Contains(CUSTOMER_ID)).ToList();
if (!string.IsNullOrEmpty(CUSTOMER_NAME))
queryList = queryList.Where(a => a.CUSTOMER_NAME.Contains(CUSTOMER_NAME)).ToList();
queryList = queryList.Skip(iDisplayStart).Take(iDisplayLength).ToList();
iTotalDisplayRecords = queryList.Count;
return Json(new { draw = sEcho, recordsFiltered = iTotalRecords, recordsTotal = iTotalDisplayRecords, data = queryList }, JsonRequestBehavior.AllowGet);
}