第62章 Jquery JSON Table 基本设置Jquery DataTables

nopCommerce是使用Jquery DataTables插件来无刷新实现页面表的查询、换页等操作，下面将对上一个示例进行重构，来通过基本配置Jquery DataTables插件来无刷新实现页面表的查询、换页等操作。

1 集成dataTables-1.12.1

    由于.NetCore框架MVC模板使用默认样式为Bootstrap5, 为了兼容Bootstrap5必须从“https://datatables.net/download/”下载最新的dataTables-1.12.1集成到程序中，否则就会因不兼容Bootstrap5从 而造成Jquery DataTables插件在页面中的显示异常。

    dataTables-1.12.1插件中默认不包含本地化配置文件，所以默认的本地化语言为英文，如果本地化语言为，中文则需要自定义“zh.json”，以实现dataTables-1.12.1插件的中文本地化显示。

2 定义类与方法

1 SerachModel

    /// <summary>

    /// 【查询模型--类】

    /// <remarks>

    /// 摘要：

    ///     通过该实体类及其属性成员，获取/设置页面中的查询字段所对应的值。

    /// </remarks>

    /// </summary>

    public class SerachModel

    {

        #region 拷贝构造方法

        /// <summary>

        /// 【拷贝构造方法】

        /// <remarks>

        /// 摘要：

        ///     通过拷贝构造方法为列表属性成员实例和字典属性成员实例分配内存空间。

        /// </remarks>

        /// </summary

        public SerachModel()

        {

            StudentList = new List<Student>();

        }

        #endregion

        #region 属性

        /// <summary>

        /// 【姓名】

        /// <remarks>

        /// 摘要：

        ///     获取/设置查询模型类1个指定实例的学生姓名。

        /// </remarks>

        /// </summary>

        [Display(Name = "姓名")]

        public string StudnetName { get; set; }

       

        /// <summary>

        /// 【学生列表】

        /// <remarks>

        /// 摘要：

        ///     获取/设置列表实例，把满足查询条件的学生实体的所有实例，存储到该列表实例中。

        /// </remarks>

        /// </summary>

        public List<Student> StudentList { get; set; }

        #endregion

    }

2 控制器类

      public IActionResult JqueryDataTable()

        {

            SerachModel _model = new SerachModel();

            _model.StudentList = _context.Student.ToList();

            return View(_model);

        }

        [HttpPost]

        public IActionResult PrepareJquerySearch(SerachModel searchParm)

        {

            try

            {

                //获取Jquery DataTable插件被操作的次数值。 

                var draw = HttpContext.Request.Form["draw"].FirstOrDefault();

                ///获取Jquery DataTable插件当前显示页面，需要跳过的行数值：=(页数-1)*pageSize(或length：(默认值)10，20，50，100)。 

                var start = Request.Form["start"].FirstOrDefault();

                //获取Jquery DataTable插件中选择框中的每1项中最多的行数值：(默认值)10。 

                var length = Request.Form["length"].FirstOrDefault();

                //Jquery DataTable插件中用于排序列的列名。 

                var sortColumn = Request.Form["columns[" + Request.Form["order[0][column]"].FirstOrDefault() + "][name]"].FirstOrDefault();

                //排序方式：(asc, desc) 

                var sortColumnDirection = Request.Form["order[0][dir]"].FirstOrDefault();

                // 获取Jquery DataTable插件中搜索控件中的查询字符串。

                var searchValue = Request.Form["search[value]"].FirstOrDefault();

                //获取Jquery DataTable插件中选择框中的每1项中最多的行数值：(默认值)10，20，50，100。 

                int pageSize = length != null ? Convert.ToInt32(length) : 0;

                int skip = start != null ? Convert.ToInt32(start) : 0;

                int recordsTotal = 0;

                // 获取指定实体的所有实例。

                var customerData = (from studentsQuery in _context.Student

                                    select studentsQuery);

                //根据指定字段值，对所有实例进行排序操作。

                //if (!(string.IsNullOrEmpty(sortColumn) && string.IsNullOrEmpty(sortColumnDirection)))

                //{

                //    customerData = customerData.OrderBy(sortColumn + " " + sortColumnDirection);

                //}

                //根据指定查询字符串，对所有实例进行查询操作。

                if (!string.IsNullOrEmpty(searchValue))

                {

                    customerData = customerData.Where(m => m.StudnetName.Contains(searchValue));

                }

                //根据指定查询字符串，对所有实例进行查询操作。

                if (!string.IsNullOrEmpty(searchParm.StudnetName))

                {

                    customerData = customerData.Where(m => m.StudnetName.Contains(searchParm.StudnetName));

                }

                //获取所有符合条件的实例的总计值。

                recordsTotal = customerData.Count();

                //根据页面设置参数值，从所有符合条件的实例中，获取在页面中进行显示的实例，并把显示实例存储到列表实例中。

                var data = customerData.Skip(skip).Take(pageSize).ToList();

                //返回以JSON格式储存的

                return Json(new { draw = draw, recordsFiltered = recordsTotal, recordsTotal = recordsTotal, data = data });

            }

            catch (Exception)

            {

                throw;

            }

        }

        [HttpPost]

        public IActionResult DeleteJqueryDataTable(int studentId)

        {

            try

            {

                int result = 0;

                Student _model = _context.Student.SingleOrDefault(s => s.Id == studentId);

                //1、单独删除方法

                _context.Student.Remove(_model);//删除单个学生信息。

                //_context.Remove(_model);//直接在context上Remove()方法传入model，它会通过指定实体的实例，判断泛型实体的类型(Student)。

                result = _context.SaveChanges();

                int recordsTotal = 0;

                recordsTotal = _context.Student.Count();

                if (result > 0)

                {

                    return Json(new { isDeleted = true, recordsTotal = recordsTotal });

                }

                else

                {

                    return Json(new { isDeleted = false, recordsTotal = recordsTotal });

                }

            }

            catch (Exception)

            {

                throw;

            }

        }

        [HttpPost]

        public IActionResult DeleteJqueryDataTableArray(int[] studentIdArray)

        {

            try

            {

                int result = 0;

                List<Student> _studentList = new List<Student>();

                foreach (var id in studentIdArray)

                {

                    Student _model = _context.Student.SingleOrDefault(s => s.Id == id);

                    _studentList.Add(_model);

                }

                foreach (var item in _studentList)

                {

                    //1、单独删除方法

                    _context.Student.Remove(item);//删除单个学生信息。

                  //_context.Remove(_model);//直接在context上Remove()方法传入model，它会通过指定实体的实例，判断泛型实体的类型(Student)。

                    _context.SaveChanges();

                }

                result = studentIdArray.Length;

                int recordsTotal = 0;

                recordsTotal = _context.Student.Count();

                if (result > 0)

                {

                    return Json(new { isDeleted = true, recordsTotal = recordsTotal });

                }

                else

                {

                    return Json(new { isDeleted = false, recordsTotal = recordsTotal });

                }

            }

            catch (Exception)

            {

                throw;

            }

        }

        public IActionResult EditJqueryDataTable(int id)

        {

            Student _model = _context.Student.SingleOrDefault(s => s.Id == id);

            return View(_model);

        }

3 定义视图

    @model JsonTable.Models.SerachModel

@{

    ViewData["Title"] = "JqueryDataTable";

}

@section styles {

    <link rel="stylesheet" type="text/css" href="~/lib/dataTables-1.12.1/css/dataTables.bootstrap5.css"/>

}

<div class="row">

    <div class="col-md-12 mt-5">

        <form asp-action="JqueryDataTable" method ="post" class="row gx-3 gy-2 align-items-center" >

            <div asp-validation-summary="ModelOnly"></div>

            <div class="col-sm-3">

                <label asp-for="StudnetName" class="visually-hidden"></label>

                <input asp-for="StudnetName" class="form-control" />

                <span asp-validation-for="StudnetName" class="text-danger"></span>

            </div>

            <div class="col-auto">

                <button type="button" id="searchStudent" class="btn btn-primary me-3">

                    <i class="fas fa-search"></i>

                    查询            

                </button>

                <button type="button" id="resetStudent" class="btn btn-secondary me-3">

                    <i class="fa-solid fa-rotate-right"></i>

                    重置            

                </button>

                <button type="button" id="deleteStudentList" class="btn btn-danger">

                    <i class="far fa-trash-alt"></i>

                    批量删除            

                </button>

            </div>

        </form>

    </div>

</div>

<div class="row">

    <div class="col-md-12 mt-5">

        <table id="example" class="table table-striped table-bordered dt-responsive nowrap" width="100%" cellspacing="0">   

        </table>  

    </div>

</div>

@section Scripts

{

    @{await Html.RenderPartialAsync("_ValidationScriptsPartial");}

    <script type="text/javascript" src="~/lib/dataTables-1.12.1/js/jquery.dataTables.js"></script>

    <script type="text/javascript" src="~/lib/dataTables-1.12.1/js/dataTables.bootstrap5.js"></script>

    <script type="text/javascript">

        var tableModel;

        $(document).ready(function() { 

            tableModel = $("#example").DataTable({ 

                language: {

                       url : '../../lib/dataTables-1.12.1/language/zh.json' //DataTables语言配置选项

                 },

                processing : true, //是否显示“处理中...”(排序的时候，数据很多耗费时间长的话，也会显示这个)

                serverSide : true,  //是否开启服务器模式

                paging : true, //是否允许翻页

                //"rowId": "userId", //指定用于行ID的属性名 默认是：DT_RowId

                lengthMenu : [10, 20, 50,  100], //DataTableJquery插件下拉框控件中的数量选择内容。

                pageLength : 10, // 每页的行数的默认值：10。

                searching : true, //是否在DataTableJquery插件中显示搜索框控件。

                autoWidth : true,   //自适应宽度

                bSort : false, //禁止排序

                ajax: {

                    url : "/Home/PrepareJquerySearch",

                    type: "POST", 

                    datatype : "JSON",

                    cache :false,  //禁用缓存

                    data : function(searchParm) { //传递参数

                        searchParm.studnetName=$("#StudnetName").val();

                    },

                },

                columnDefs : [ {  //设置列定义初始化属性

                     "defaultContent" : "", //为列设置默认的静态内容

                     "targets" : "_all"  //指定所有列

                } ],

                //注意："data"对应的字段（实体属性）的第1个字母必是小写，否则实体实例的值将不会被浏览器渲染出来。

                "columns": [ 

                     {

                        "data": "id", "title":"<input type='checkbox' id='checkAll' class='form-check-input' />",

                        "render": function (data, type, row, meta)

                        {

                            return "<input type='checkbox' name='checkItem' value=" + data + " class='form-check-input' />";

                        },

                        "autoWidth": true

                    },

                    { "data": "id",  "title": "编号", "autoWidth": true},

                    { "data": "code",  "title": "学号", "autoWidth": true},

                    { "data": "studnetName",  "title": "姓名", "autoWidth": true },

                    { "data": "specialty",  "title": "专业" , "autoWidth": true},

                    { "data": "grade", "title": "年级" , "autoWidth": true},

                    { "data": "category",  "title": "班级" , "autoWidth": true},

                    { 

                        "render": function(data, type, full, meta) { return '<a class="btn btn-info" href="/Home/EditJqueryDataTable/' + full.id + '">编辑</a>'; } 

                    }, 

                    { 

                        data: null, 

                        render: function(data, type, row) { 

                            return "<a href='#' class='btn btn-danger' οnclick=deleteData('" + data.id+ "'); >删除</a>"; 

                        } 

                    }, 

                ],

              

           });

           

           // init：初始化和数据都加载完成，和 initComplete配置等价

           tableModel.on("draw", function ()

            {

                //全选

                $("#checkAll").click(function(){

                    $("[name=checkItem]:checkbox").prop("checked",this.checked);

                });

                //复选框组的联动效果

                $("[name=checkItem]:checkbox").click(function(){

                    var flag = true;

                    $("[name=checkItem]:checkbox").each(function(index){

                        if(!this.checked)

                        {

                            flag = false;

                        }

                    });

                    $("#checkAll").prop("checked",flag);

                });

            });

        }); 

        //查询列表

        $("#searchStudent").on("click", function() {

             //重新加载DataTable插件，并返回第1页。

            $("#example").DataTable().ajax.reload();

        });

         //重置列表

        $("#resetStudent").on("click", function() {

             //重新加载DataTable插件，并返回第1页。

            $("#StudnetName").val("");

            $("#example").DataTable().ajax.reload();

        });

         $("#resetStudent").on("click", function() {

             //重新加载DataTable插件，并返回第1页。

            $("#StudnetName").val("");

            $("#example").DataTable().ajax.reload();

        });

        //删除单个指定用户

        function deleteData(id)

        {

            if (!confirm("确定删除该记录吗？")) {

                return;

            }

            if (id <= 0) {

                alert("参数错误！");

                return;

            }

            //执行您的删除操作

            alert("删除学生的编号：" + id);

            $.post("/Home/DeleteJqueryDataTable/", { studentId: id}, function(data) { 

                if (data.isDeleted)

                { 

                    var pageIndex = tableModel.page();//当前页页码值，但是Jquery DataTables插件的页面是从“0”开始，而不从“1”。

                    var pageLength = tableModel.page.info().length;//每1页最多显示的行数值。

                    var pageStart = tableModel.page.info().start;  //获取Jquery DataTable插件当前显示页面，需要跳过的行数值：=(页数-1)*pageSize(或length：(默认值)10，20，50，100)。 

                    var pageCount = tableModel.page.info().pages;//获取Jquery DataTable插件中的总页面值。

                    //alert("pageIndex：" +  pageIndex);

                    //alert("pageLength：" +  pageLength);//当前每页显示多少 .

                    //alert("pageStart：" +  pageStart);

                    //alert("pageCount：" +   pageCount);

                    //alert("recordsTotal：" +  data.recordsTotal);

                    if ((data.recordsTotal - pageStart) <= 0 && pageStart > 0) {

                        $("#example").DataTable().page('previous').draw("page");//返回上一页

                    }

                    else

                    {

                        $("#example").DataTable().page(pageIndex).draw(false); //刷新当前页；或跳转到指定页。

                    }

                }

                else

                { 

                    alert("Something Went Wrong!"); 

                } 

            }); 

        }

       //批量删除

        $("#deleteStudentList").on("click", function() {

            var idArray = new Array(); //批量删除的用户ID数组

            $("[name=checkItem]:checkbox:checked").each(function(index){

                idArray.push($(this).val());

            });

            if(idArray.length==0)

            {

                alert("请选择要删除的员工！");

                return;

            }

            if (!confirm("确定删除记录吗？")) {

                return;

            }

            //执行您的删除操作

            alert("删除用户的编号：" + idArray);

            $.post("/Home/DeleteJqueryDataTableArray/", { studentIdArray: idArray}, function(data) { 

                if (data.isDeleted)

                { 

                    var pageIndex = tableModel.page();//当前页页码值，但是DataTables插件的页面是从“0”开始，而不从“1”。

                    var pageLength = tableModel.page.info().length;//每1页最多显示的行数值。

                    var pageStart = tableModel.page.info().start;  //获取Jquery DataTable插件当前显示页面，需要跳过的行数值：=(页数-1)*pageSize(或length：(默认值)10，20，50，100)。 

                    var pageCount = tableModel.page.info().pages;//获取Jquery DataTable插件中的总页面值。

                    //alert("pageIndex：" +  pageIndex);

                    //alert("pageLength：" +  pageLength);//当前每页显示多少 .

                    //alert("pageStart：" +  pageStart);

                    //alert("pageCount：" +   pageCount);

                    //alert("recordsTotal：" +  data.recordsTotal);

                    if ((data.recordsTotal - pageStart) <= 0 && pageStart > 0) {

                        //$(DomID).dataTable().fnPageChange('previous', true);

                        $("#example").DataTable().page('previous').draw("page");//返回上一页

                    }

                    else

                    {

                        $("#example").DataTable().page(pageIndex).draw(false); //刷新当前页；或跳转到指定页。

                    }

                }

                else

                { 

                    alert("Something Went Wrong!"); 

                } 

            }); 

        });

    </script>

}

    注意：Jquery DataTables插件开始页面的默认值是从“0”开始，而不从“1”的。

对以上功能更为具体实现和注释见：22-08-09-062_JsonTable(基本设置Jquery DataTables)。