JQuery DataTable 笔记

后端

        public ActionResult ListByPage1(int start = 0, int length = 10)
        {
            string value = Request.Query["search[value]"];
            string sortColumnIndex =  Request.Query["order[0][column]"];
            string sortField = Request.Query["columns["+ sortColumnIndex + "][data]"];
            string direction = Request.Query["order[0][dir]"];
            string orderBy = sortField + " " + direction;
            string SysId = 1string sql = "select  * from Announcement where isActive=1 and SysId={0} and Subject like {1}";
            //不能用字符串拼接,否则会出警告
            var qry = _context.Announcements.FromSql(sql, new[] { SysId, '%' + value + '%' }).OrderBy(orderBy);
            IQueryable<Announcement> list;
            //jquery.datatable用start,length

             list = qry.Skip(start).Take(length);
 

            var result = new { total = qry.Count(), rows = list.ToList() };


            return Json(result);
        }

JS

<!-- page script -->
<script>
    $(function () {

        $('#example2').DataTable({
            "processing": true,
            "serverSide": true,
            ajax: {
                url: '/@controller/ListByPage1',
                dataSrc: 'rows',
                dataFilter: function (data) {
                    var json = jQuery.parseJSON(data);
                    json.recordsTotal = json.total;
                    json.recordsFiltered = json.total;
                    json.data = json.rows;

                    return JSON.stringify(json); // return JSON string
                }
            },
            columns: [
                { data: 'subject' },
                { data: 'createDate' },
                { data: 'modifyDate' }
            ],
            "paging": true,
            "lengthChange": true,
            "searching": true,
            "ordering": true,
            "info": true, // 是否显示情报 就是"当前显示1/100记录"这个信息
            "autoWidth": false,
        });
    });
    $.fn.dataTable.defaults.oLanguage = {
        "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": "末页"
        },
        "oAria": {
            "sSortAscending": ": 以升序排列此列",
            "sSortDescending": ": 以降序排列此列"
        }
    }


</script>

HTML

<table id="example2" class="table table-bordered table-hover">
    <thead>
        <tr>
            <th>@Html.Lang("lblSubject")</th>
            <th>@Html.Lang("lblCreateDate")</th>
            <th>@Html.Lang("lblModifyDate")</th>
        </tr>
    </thead>
</table>