Jquery-dataTable使用说明

最新推荐文章于 2022-11-22 16:28:53 发布

Lingbug

最新推荐文章于 2022-11-22 16:28:53 发布

阅读量386

点赞数

分类专栏： C#/.NET 前端技术

本文链接：https://blog.csdn.net/m0_37886901/article/details/102589057

版权

C#/.NET 同时被 2 个专栏收录

37 篇文章 1 订阅

订阅专栏

前端技术

13 篇文章 0 订阅

订阅专栏

直接上码了！

需要引入的js/css：

1.jquery-dataTable.js：直接从中文网下载了一个

2.jquery-dataTable.css：直接从中文网下载了一个

3.jquery：不必多说

4.jquery-dataTable-extend.js：jquery-dataTable的扩展和汉化，自己写的，如下

(function ($) {
    $.extend($.fn.dataTable.defaults,
        {
            autoWidth: false,
            dom: '<"datatable-header"lr><"datatable-scroll"t><"datatable-footer"ip>',
            language: {
                "oAria": {
                    "sSortAscending": ": 升序排列",
                    "sSortDescending": ": 降序排列"
                },
                "oPaginate": {
                    "sFirst": "首页",
                    "sLast": "末页",
                    "sNext": "下页",
                    "sPrevious": "上页"
                },
                "sEmptyTable": "没有相关记录",
                "sInfo": "第 _START_ 到 _END_ 条记录，共 _TOTAL_ 条",
                "sInfoEmpty": "第 0 到 0 条记录，共 0 条",
                "sInfoFiltered": "(从 _MAX_ 条记录中检索)",
                "sInfoPostFix": "",
                "sDecimal": "",
                "sThousands": ",",
                "sLengthMenu": "每页显示条数: _MENU_",
                "sLoadingRecords": "正在载入...",
                "sProcessing": "正在载入...",
                "sSearch": "搜索:",
                "sSearchPlaceholder": "",
                "sUrl": "",
                "sZeroRecords": "没有相关记录"
            }
        });
})($);

前端：

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title></title>
    <link href="~/Lib/jqueryDataTable/jquery-dataTable.min.css" rel="stylesheet" />
</head>
<body>
    <div>
        <table id="dt" class="table table-bordered table-striped table-hover">
            <thead>
                <tr>
                    <th><input type="checkbox" id="checkAll" /></th>
                    <th>Id</th>
                    <th>项目名称</th>
                    <th>开发项</th>
                    <th>状态</th>
                    <th>创建时间</th>
                    <th>上次修改时间</th>
                    <th>操作</th>
                </tr>
            </thead>
        </table>
    </div>
</body>
</html>
<script src="~/Lib/Easyui/jquery.min.js"></script>
<script src="~/Lib/jqueryDataTable/jquery-dataTable.min.js"></script>
<script src="~/Script/jquery-dataTable-extend.js"></script>
<script>
    $(function () {
        testJqueryDataTableIndexService.initTable();
    });

    var testJqueryDataTableIndexService = {
        dt: null,
        initTable: function () {
            testJqueryDataTableIndexService.dt = $("#dt").DataTable({
                "serverSide": true,
                "ajax": {
                    "url": "/Lingbug/QueryDataForJqueryDataTable",
                    "type": "post",
                    "data": function (data) {
                        data.searchParameterJson = JSON.stringify(data);
                    }
                },
                "columns": [
                    { "defaultContent": "" },
                    { "data": "Id" },
                    { "data": "ProjectName" },
                    { "data": "DevelopPoint" },
                    { "defaultContent": "" },
                    { "data": "CreateDateShow" },
                    { "data": "LastUpdateDateShow" },
                    { "defaultContent": "" }
                ],
                "columnDefs": [
                    {
                        "targets": [0],
                        "data": "DtCheckbox",
                        "render": function (data, type, full) {
                            return '<input type="checkbox" name="dtCheckbox" data-id="' + full.UserId + '" />';
                        }
                    },
                    {
                        "targets": [4],
                        "data": "StatusShow",
                        "render": function (data, type, full) {
                            if (full.Status == 1) {
                                return '<span class="badge badge-danger">正常</span>';
                            } else {
                                return '<span class="badge badge-success">已删除</span>';
                            }
                        }
                    },
                    {
                        "targets": [7],
                        "data": "ActionColumn",
                        "render": function (data, type, full) {
                            var html = '<button type="button" class="btn btn-primary" onclick="demoService.updateDemoUser(\'' + full.UserId + '\')">编辑</button>';
                            html += '&nbsp;&nbsp;';
                            html += '<button type="button" class="btn btn-danger" onclick="demoService.deleteDemoUser(\'' + full.UserId + '\')">删除</button>';
                            return html;
                        }
                    },
                    {
                        "orderable": false, "targets": [0, 3, 7]
                    }
                ],
                "initComplete": function (settings, json) {

                },
                "pagingType": "full_numbers",
                "processing": true,
                "ordering": true
            });
        }
    };
</script>

后端：

public string QueryDataForJqueryDataTable(string searchParameterJson)
        {
            //LogService.Info("searchParameterJson = " + searchParameterJson);
            var obj = JObject.Parse(searchParameterJson);

            var orderList = JArray.Parse(obj["order"].ToString());
            var order = orderList[0];
            var orderColumnIndex = Convert.ToInt32(order["column"]);
            var orderDir = order["dir"].ToString();


            var orderColumnName = "CreateDate";

            var columns = JArray.Parse(obj["columns"].ToString());
            var orderColumn = columns[orderColumnIndex];
            if (Convert.ToBoolean(orderColumn["orderable"]))
            {
                orderColumnName = orderColumn["data"].ToString();
            }
            if (orderColumnName.EndsWith("Show"))
            {
                orderColumnName = orderColumnName.Substring(0, orderColumnName.Length - 4);
            }
            var start = Convert.ToInt32(obj["start"]);
            var length = Convert.ToInt32(obj["length"]);
            var draw = Convert.ToInt32(obj["draw"]);

            return QueryBody(() =>
            {
                string sql = string.Format(@" SELECT * FROM dbo.Task t ORDER BY t.{0} {1} OFFSET {2} ROWS FETCH NEXT {3} ROWS ONLY ", orderColumnName, orderDir, start, length);
                var list = DataTableToList<TaskViewModel>(QueryForDataTable(sql));
                var total = DataTableToList<Tuple<int>>(QueryForDataTable("SELECT COUNT(*) Item1 FROM dbo.Task")).First().Item1;

                foreach (var viewModel in list)
                {
                    string dateFormat = "yyyy-MM-dd HH:mm:ss";
                    viewModel.CreateDateShow = viewModel.CreateDate.ToString(dateFormat);
                    if (viewModel.LastUpdateDate.HasValue)
                    {
                        viewModel.LastUpdateDateShow = viewModel.LastUpdateDate.Value.ToString(dateFormat);
                    }
                }

                return new JqueryDataTableResponseModel<TaskViewModel>()
                {
                    Data = list,
                    Total = total,
                    Start = start,
                    Len = length,
                    Draw = draw
                };
            });
        }

        private string QueryBody<T>(Func<JqueryDataTableResponseModel<T>> action)
        {
            var result = action.Invoke();
            return JsonConvert.SerializeObject(new
            {
                data = result.Data,
                recordsTotal = result.Total,
                recordsFiltered = result.Total,
                draw = result.Draw,
                start = result.Start,
                length = result.Len
            });
        }

over~

Lingbug

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Jquery-dataTable使用说明

直接上码了！需要引入的js/css：1.jquery-dataTable.js：直接从中文网下载了一个2.jquery-dataTable.css：直接从中文网下载了一个3.jquery：不必多说4.jquery-dataTable-extend.js：jquery-dataTable的扩展和汉化，自己写的，如下(function ($) { $.extend($...
复制链接

扫一扫