Jquery.Datatables 服务器处理(Server-side processing)

Posted 2020-07-22 【唐】三三

 

看了看介绍

http://datatables.club/manual/server-side.html

没有经过处理的分页，先显示出来看看效果，就这样写（存储过程自己写）

 

cshtml

"serverSide": true,//服务器处理：过滤、分页、排序
 "processing": true,//是否显示处理状态(排序的时候，数据很多耗费时间长的话，也会显示这个)

 

controller.cs

//jquery.datatables
        public JsonResult GetUserInfoList()
        {
            try
            {
                int pageSize = int.Parse(Request.Params["length"]);
                int start = int.Parse(Request.Params["start"]);
                int pageIndex = start / pageSize + 1;

                JsonResponse list = UserInfoService.Service.GetDataTablesUserInfoList(pageIndex, pageSize);
                return this.Json(list);
            }
            catch (Exception ex)
            {
                return this.Json(UnifyResponse.ThrowError(ex));
            }
        }

 

bll

public JsonResponse GetDataTablesUserInfoList(int pageIndex, int pageSize)
        {
            try
            {
                proc_DataPagination p_page = new proc_DataPagination();
                p_page.Table = "UserInfo";
                p_page.Fields = "*";
                p_page.CurrentPage = pageIndex;
                p_page.PageSize = pageSize;
                p_page.OrderBy = "ID desc";
                p_page.Where = string.Format("1=1");
                //p_page.Where = string.Format("openid like \'%{0}%\'",);
                IList<UserInfo> list = DDataBase.WebDB.StoredProcedureToIList<proc_DataPagination, UserInfo>(p_page);

                JsonResponse mypage = new JsonResponse();
                mypage.data = list;
                mypage.recordsTotal = p_page.Count;
                mypage.recordsFiltered = p_page.Count;
             
                return mypage;
            }
            catch (Exception ex)
            {
                throw ex;
            }
        }

 

<div class="row">
    <div class="col-lg-12">
        <h1 class="page-header">微信用户管理</h1>
    </div>
</div>
<!-- /.col-lg-12 -->
<!-- /.row -->
<div class="row">
    <div class="col-lg-12">
        <div class="panel panel-primary">
            <div class="row-fluid" id="div-advanced-search">
                <form class="form-inline well">
                    <span>openid:</span>
                    <input type="text" class="input-medium" placeholder="openid" id="openid-search">
                    <span>昵称:</span>
                    <input type="text" class="input-medium" placeholder="昵称" id="nickname-search">
                    @*                        <span>工作地点:</span>
                        <input type="text" class="input-medium" placeholder="工作地点" id="office-search">
                        <span>编号:</span>
                        <input type="text" class="input-medium" placeholder="编号" id="extn-search">
                        <span>在线状态:</span>
                        <select class="input-small" id="status-search">
                            <option value="">全部</option>
                            <option value="1">在线</option>
                            <option value="0">离线</option>
                        </select>
                        <select class="input-small" id="role-search">
                            <option value="">全部</option>
                            <option value="1">管理员</option>
                            <option value="0">操作员</option>
                        </select>*@
                    <button type="button" class="btn" id="btn-advanced-search"><i class="fa fa-search"></i>查询</button>
                    <button type="button" class="btn" id="btn-clear-search"><i class=""></i>清空</button>
                </form>
            </div>

            <div class="panel-heading">
                微信用户               
            </div>
            <!-- /.panel-heading -->

 

 

重点来了，搜索就用自定义搜索
//column().search()
//地址：https://datatables.net/reference/api/column().search() 

//自定义搜索
    //column().search()
    //地址：https://datatables.net/reference/api/column().search()  
    $("#btn-advanced-search").click(function () {
        tables.column(1)
            .search($(\'#openid-search\').val())
            .column(2)
            .search($(\'#nickname-search\').val())
            .draw();
    });

    //清空
    $("#btn-clear-search").click(function () {
        $(\'#openid-search\').val(\'\');
        $(\'#nickname-search\').val(\'\');
        tables.column(1)
           .search($(\'#openid-search\').val())
           .column(2)
           .search($(\'#nickname-search\').val())
           .draw();
    });