• 章节:10
  • 访问:4295
  • 时长:00:10:24
  • 日期:2018-06-15 09:27

它是一个基于jquery的一个表格控件。可以分页 搜索 排序 格式化 等等。

1 首先我们在页面中引入js css这些

<script src="~/Content/adminlte30/plugins/jquery/jquery.min.js"></script>

    <!-- Bootstrap 4 -->

    <script src="~/Content/adminlte30/plugins/bootstrap/js/bootstrap.bundle.min.js"></script>

    <!-- DataTables -->

    <script src="~/Content/adminlte30/plugins/datatables/jquery.dataTables.js"></script>

    <script src="/include/plugins/datatables/dataTables.bootstrap4.js"></script>

    <!-- SlimScroll -->

    <script src="~/Content/adminlte30/plugins/slimScroll/jquery.slimscroll.min.js"></script>

    <!-- FastClick -->

    <script src="~/Content/adminlte30/plugins/fastclick/fastclick.js"></script>

    <!-- AdminLTE App -->

    <script src="~/Content/adminlte30/dist/js/adminlte.min.js"></script>

    <!-- AdminLTE for demo purposes -->

    <script src="~/Content/adminlte30/dist/js/demo.js"></script>

2 页面添加一个table

<table id="example2" class="table table-bordered table-hover">

                        <thead>

                            <tr>

                                <th>ID</th>

                                <th>标题</th>

                                <th>时间</th>

                                <th>操作</th>

                            </tr>

                        </thead>

                    </table>

3 初始化datatables

<script>

        $(function () {

            $('#example2').DataTable({

                paging: true,

                lengthChange: false,

                searching: false,

                ordering: true,

                info: true,

                autoWidth: false,

                serverSide: true,

                iDisplayLength: 15,

                iDisplayStart: 0,

                bStateSave: true,

                pagingType: "full_numbers",

                order: [[0, "desc"]],

                aoColumnDefs: [

                     { "bSortable": false, "aTargets": [1, 2] }

                ],

                ajax: {

                    // url可以直接指定远程的json文件,或是MVC的请求地址 /Controller/Action

                    url: "/role/load",

                    type: 'POST',

                    // 传给服务器的数据,可以添加我们自己的查询参数

                    data: function (param) {

                        param.opportunityNO = 'key';

                        return param;

                    }

                },

                language: { //国际化配置

                    "sProcessing": "正在获取数据,请稍后...",

                    "sLengthMenu": "显示 _MENU_条",

                    "sZeroRecords": "无数据",

                    "sInfo": "从 _START_到  _END_ 条记录 总记录数为 _TOTAL_ 条",

                    "sInfoEmpty": "记录数为0",

                    "sInfoFiltered": "(全部记录数_MAX_条)",

                    "sInfoPostFix": "",

                    "sSearch": "搜索",

                    "sUrl": "",

                    "oPaginate": {

                        "sFirst": "第一页",

                        "sPrevious": "上一页",

                        "sNext": "下一页",

                        "sLast": "最后一页"

                    }

                },

                columns: [

                   { "data": "ID" },

                   { "data": "Name" },

                   {

                       "data": function (obj) {

                           return obj.AddTime;

                       }

                   },

                    {

                        "data": function (obj) {

                            return '<button type="button" class="btn btn-default btn-xs" onclick="$(\'#roleid\').val(' + obj.ID + ');$(\'#myModal2\').modal(\'show\');">配置权限</button>';

                        }

                    }

                ]

            });

       });

    </script>

[HttpPost]

        public ActionResult Load()

       {

            var context = new Adminlte30Entities();

            var list = context.ArticleSet.ToList();

            return Json(new

            {

                draw = ConvertDateTimeToInt(DateTime.Now),

                recordsTotal = list.Count,

                recordsFiltered = list.Count,

                data = list.Take(10).Select(m => new { m.Id, m.Title, m.AddTime })

            }, JsonRequestBehavior.AllowGet);

       }


        private long ConvertDateTimeToInt(System.DateTime time)

       {

            System.DateTime startTime = TimeZone.CurrentTimeZone.ToLocalTime(new System.DateTime(1970, 1, 1, 0, 0, 0, 0));

            long t = (time.Ticks - startTime.Ticks) / 10000;   //除10000调整为13位     

            return t;

       }

图片5.png

关于分页

一旦我能配置了datatable的分页 paging true的时候

每次加载数据 就会往服务器发送,我们就可以在action这边获取start 和length

order[0][dir]:

desc

start:

0

length:

15

search[value]:

search[regex]:

false

opportunityNO:

key