asp.net mvc bootstrap datatable 服务端分页 更新槽糕的代码【1】

datatable 服务端分页

因项目需求变动,需处理大量数据,更改成服务端分页,自己两天的学习笔记

datatable 1.10.7 百度云下载  密码:0ea1

先上图【 jqueryui风格】

 "bJQueryUI": false, //是否使用 jQury的UI theme 默认风格

 

 

 查询效果

 

@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />

    <link href="~/Scripts/DataTables-1.10.7/css/select.dataTables.min.css" rel="stylesheet" />
    <link href="~/Scripts/DataTables-1.10.7/css/jquery.dataTables.css" rel="stylesheet" />
    <link href="~/Scripts/framework/plugins/jqueryui/lxwJQueryUI.css" rel="stylesheet" />

    <link href="~/Content/bootstrap.min.css" rel="stylesheet" />
    <script src="~/Scripts/jquery-1.10.2.js"></script>
    <script src="~/Scripts/framework/plugins/jqueryui/jquery-ui.min.js"></script>
    <script src="~/Scripts/bootstrap.min.js"></script>
    <script src="~/Scripts/DataTables-1.10.7/js/jquery.dataTables.js"></script>
    <script src="~/Scripts/DataTables-1.10.7/js/dataTables.select.js"></script>

    <style>
        /*.selected {
            background-color: rgb(238, 211, 210) !important;
        }*/
    </style>
</head>
<body>
    <div class="panel panel-success">
        <div class="panel-heading">
            <h3 class="panel-title">查询</h3>
        </div>
        <div class="panel-body">

        </div>
    </div>

    <div class="widget-content nopadding">
        <table id="archivestable" class="table table-bordered data-table mydatatable ">
            <thead>
                <tr>
                    <th>编号</th>
                    <th>标题</th>
                    <th>内容</th>
                    <th>浏览量</th>

                    <th>状态</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody></tbody>
        </table>
    </div>


    <script type="text/javascript">

        $(function () {
            var table;

            table = $('#archivestable').dataTable({
                "bJQueryUI": false, //是否使用 jQury的UI theme
                "language": {
                    "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": ": 以降序排列此列"
                    },
                    "deferRender": true
                },
                "bRetrieve": "true",
                "responsive": "true",
                "paging": "true",
                "bServerSide": true,  //:服务端处理分页后数据,客户端呈现,此时为true.但此时aoColumns要变,将'sName'换成mDataProp,同时自定义列也要有对应的数据
                "sServerMethod": "GET",//老版本提交方式
                "sAjaxSource": "/Home/GetNesList", //ajax Url地址
                //"ajax": {
                //    "url": "/Home/GetNesList",
                //    "type": "POST"
                //},
                "bProcessing": true,

                "bPaginate": true,
                "sPaginationType": "full_numbers",

                'bFilter': true,//关闭搜索
                'bsearch': true,

                "aLengthMenu": [6, 8, 10, 20, 50],
                "iDisplayLength": 8,
                "iDisplayStart": 0,
                'bAutoWidth': true,
                "aoColumns": [
                          { "data": "Id" },
                          { "data": "Title" },
                          { "data": "NewsContent" },

                          { "data": "DCount" },
                          { "data": "Status" },
                          { "data": null },
                ],

                "aoColumnDefs": [
                     {
                         "targets": [4],
                         "searchable": false,
                         "render": function (data, type, row) {
                             if (data == 0)
                                 return '禁用';
                             else
                                 return '可用';
                         }
                     }, {

                         sDefaultContent: '',
                         aTargets: ['_all']
                     }
                ]
            });



            ////表格行点击设置选中样式
            $("#archivestable tbody").on("click", "tr", function () {
                var $curr = $(this);
                if ($curr.hasClass("selected")) {
                    $curr.removeClass("selected");
                }
                else {
                    table.$("tr.selected").removeClass("selected");
                    $curr.addClass("selected");
                }
            });


        });



    </script>
</body>
</html>
前端代码
    /// <summary>
    ///分页类处理

    /// </summary>
    public class DataTableParameter
    {
        /// <summary>
        /// 1.0 DataTable用来生成的信息
        /// </summary>       
        public string sEcho { get; set; }

        /// <summary>
        /// 2.0分页起始索引
        /// </summary>
        public int iDisplayStart { get; set; }

        /// <summary>
        /// 3.0每页显示的数量
        /// </summary>
        public int iDisplayLength { get; set; }

        /// <summary>
        /// 4.0搜索字段
        /// </summary>
        public string sSearch { get; set; }

        /// <summary>
        /// 5.0列数
        /// </summary>
        public int iColumns { get; set; }

        /// <summary>
        /// 6.0排序列的数量
        /// </summary>
        public int iSortingCols { get; set; }

        /// <summary>
        /// 7.0逗号分割所有的列
        /// </summary>
        public string sColumns { get; set; }
    }
分页封装实体
/// <summary>
/// 临时新闻类
/// </summary>
public class News
{
public int Id { get; set; }
public string Title { get; set; }
public string NewsContent { get; set; }

public int DCount { get; set; }
public int Status { get; set; }

}
临时新闻类

无连接数据库,通过for循环生成list数据集合,大小可以自己稍微调整

/// <summary>
/// 生成数据源
/// </summary>
/// <returns></returns>
public List<News> Getlist()
{
List<News> myLsit = new List<News>();
for (int i = 0; i < 300; i++)
{
if (i % 2 == 0)
{
myLsit.Add(new News { Id = i, Title = "ceshi", NewsContent = "哈哈" + i, DCount = 20, Status = 0 });
}
else
{
myLsit.Add(new News { Id = i, Title = "ceshi", NewsContent = "哈哈" + i, DCount = 20, Status = 1 });
}


}
return myLsit;
}

 
生成数据源

最后是控制器

 [HttpGet]
        public JsonResult GetNesList(DataTableParameter tp)
        {
            #region 


            //1 获取数据源
            List<News> DataSource = Getlist();
            //DataSource = DataSource.OrderByDescending(a => a.SubTime).ToList();

            //2 处理页数
            string echo = tp.sEcho;  //用于客户端自己的校验
            int dataStart = tp.iDisplayStart;//开始页数
            int pageSize = tp.iDisplayLength == -1 ? DataSource.Count : tp.iDisplayLength;//总页数
            string search = tp.sSearch;

            //3 是否有搜索框条件,【因为版本问题,暂时没有实现】
         
            if (!String.IsNullOrEmpty(search))
            {
                var data = DataSource.Where(a => a.Title.Contains(search) ||
                                 a.NewsContent.Contains(search))
                     .Skip<News>(dataStart)
                     .Take(pageSize)
                    .ToList();

               
                return Json(new
                {
                    sEcho = echo,
                    iTotalRecords = DataSource.Count(),
                    iTotalDisplayRecords = DataSource.Count(),
                    aaData = data
                }, JsonRequestBehavior.AllowGet);
            }
            else
            {
                var data = DataSource.Skip<News>(dataStart)
                                     .Take(pageSize)
                                     .ToList();
              
                return Json(new
                {
                    sEcho = echo,
                    iTotalRecords = DataSource.Count(),
                    iTotalDisplayRecords = DataSource.Count(),
                    aaData = data
                }, JsonRequestBehavior.AllowGet);
            }
            #endregion
        }
控制器

 

第一次写,如果有不明白的程序们,可以联系我:qq935299029,注明:博客园

posted @ 2016-08-24 22:59  S_Wilson  阅读(1620)  评论(0编辑  收藏  举报