JQuery dataTable 扩展+Ajax Post，Get一些基本操作（一）

浏览数：42 / 时间：2015年06月09日

首先， Asp.net MVC 系列暂时没有发现封装好的类似于web form 的datagrid，只有一款Jquery 的dataTable ，官网地址 http://www.datatables.net, 接下来讲解一下关于自己在项目中对datatable进行扩展的一些实例。（first，Asp.net MVC have not packaging control similar the web form datagrid , and now i just konw Jquery dataTable, and The website address: http://www.datatables.net, the next ,i will list some examples that i have meet some issues in project）,

直接上视图代码

<form method="post" onsubmit="return MaintainDel();">
    <div id="Message">
        <h3 style="color:red">@ViewBag.mes</h3>
    </div>
    <input id="ChooseUserId" name="ChooseUserId" type="hidden" />
    <div class="row">
        <div class="col-lg-12">
            <div class="panel panel-default">
                <!--<div class="panel-heading">
                    Users
                </div>-->

                <div class="panel-body">
                    <div class="table-responsive">
                        <table id="tab" class="table table-striped table-bordered table-hover">
                            <thead>
                                <tr>
                                    <th>Delete</th>
                                    <th>NRIC</th>
                                    <th>USER ID</th>
                                    <th>NAME</th>
                                    <th>Email</th>
                                    <th>ContactNo.</th>
                                    <th>Agency</th>
                                    <th>Designation</th>
                                    <th>SchemeRole</th>
                                    @*<th>IsDeleted</th>*@
                                </tr>
                            </thead>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="text-center">
        <input id="AddUserInfo" type="button" class="btn btn-default" value="Add User" onclick="AddUser();" name="btnaction" />&nbsp;
        <input id="DelUserInfo" type="submit" class="btn btn-default" value="Delete" name="btnaction" />
    </div>
    </form>

对于JQuerydatatable，我们只需要在视图中写出table的head 就可以，接下来是controller里面从数据库拿一个list的方法，由于project用的是EF+MVC+Storeprocedure ，对于拿数据方面就不多讲，下面是controller的代码：

 [HttpGet]
        [MyAuthorize(ActionName = ActionCode.MaintainSuperUserAdmin)]
        public ActionResult MaintainSuperUserAdmin()
        {
            return View();
        }

        /// <summary>
        /// return Json Data for Jquery  Table
        /// </summary>
        /// <param name="parm"></param>
        /// <returns></returns>
        public JsonResult PageList(DataTablesParam parm)
        {
            int iDisplayStart = Convert.ToInt32(Request.Params["iDisplayStart"]);
            //data size
            int iDisplayLength = Convert.ToInt32(Request.Params["iDisplayLength"]);
            //data total            
            int totalCount;
            IEnumerable<UserUserInfo> user = this.ServiceLocator.GetService<IUserInfoRoleSchemeService>().GetUserInfoRoleSchemeViewInfo(Common.AdminRoleId.SuperAdminId, appid, iDisplayStart, iDisplayLength, out totalCount).ToList();
            return Json(new
            {
                sEcho = parm.sEcho,
                iTotalRecords = totalCount,
                iTotalDisplayRecords = totalCount,
                aaData = user
            }, JsonRequestBehavior.AllowGet);
        }

　一个Action对应一个View 改View的数据从Jsonresult中获取。

[MyAuthorize(ActionName = ActionCode.MaintainSuperUserAdmin)]这段是用户权限过滤器 就不细讲，可用可不用。 主要代码为

PageList中  拿list数据 以及返回Json格式。Dataparam为个人封装的 可以接收JqueryDatatable 一些属性的数据，（注意JQueryDatatable 自带分页效果）

public class DataTablesParam 
    {
        public int iDisplayStart { get; set; }
        public int iDisplayLength { get; set; }
        public int iColumns { get; set; }
        public string sSearch { get; set; }
        public bool bEscapeRegex { get; set; }
        public int iSortingCols { get; set; }
        public int sEcho { get; set; }
        public int total { get; set; }
        public List<bool> bSortable { get; set; }
        public List<bool> bSearchable { get; set; }
        public List<string> sSearchColumns { get; set; }
        public List<int> iSortCol { get; set; }
        public List<string> sSortDir { get; set; }
        public List<bool> bEscapeRegexColumns { get; set; }

        public DataTablesParam()
        {
            bSortable = new List<bool>();
            bSearchable = new List<bool>();
            sSearchColumns = new List<string>();
            iSortCol = new List<int>();
            sSortDir = new List<string>();
            bEscapeRegexColumns = new List<bool>();
        }

        public DataTablesParam(int iColumns)
        {
            this.iColumns = iColumns;
            bSortable = new List<bool>(iColumns);
            bSearchable = new List<bool>(iColumns);
            sSearchColumns = new List<string>(iColumns);
            iSortCol = new List<int>(iColumns);
            sSortDir = new List<string>(iColumns);
            bEscapeRegexColumns = new List<bool>(iColumns);
        }
    }

　　Ok 一切就绪了，那么接下来就是如何将后台拿到的数据传递给View的Table，下面是关于这方面的JQuery代码，关于datatable的一些属性，大家就百度吧，，有用到的再说。

$(document).ready(function () {
        var admin = $(‘#tab‘).dataTable({
            "sAjaxSource": "@Url.Content("~/UserInfoRoleScheme/SchemePagelist")",
            //"sScrollX": "100%",
            "sScrollXInner": "100%",
            //"bScrollCollapse": true,
            "serverSide": true,
            ‘bPaginate‘: true,
            "bLengthChange": false,
            "bSort": false,
            "bFilter": false,
            "oLanguage": {
                "sZeroRecords": "@Messages.General.EmptyData.Format()",
                "sEmptyTable": "@Messages.General.EmptyData.Format()",
            },
            "aoColumnDefs": [
                  {
                      "render": function (data, type, full) {
                          if (full.IsDeleted == true) {
                              return full.UserName;
                          }
                          else {
                              return ‘<a href="‘ + "@Url.Content("~/UserInfoRoleScheme/UpdateSchemeUser")" + "?userid=" + full.UserId + ‘">‘ + full.FullName + ‘</a>‘;
                          }
                      },
                      "targets": 3
                  },
          {
              "render": function (data, type, full) {

                  return ‘<input type="checkbox" id="CheckUser" name="SelectedRoleId" class="userCheck" value="‘ + full.UserId + ‘"/>‘;
              },
              "targets": 0
          },
           {
               "render": function (data, type, full) {

                   return Trim(full.SchemeRole);
               },
               "targets": 8
           },
          //{
          //    "render": function (data, type, full) {
          //        if (full.IsDeleted == true) {
          //            return "Yes";
          //        }
          //        else {
          //            return "No";
          //        }
          //    },
          //    "targets": 10
          //},
            ],
            ‘aoColumns‘: [
                    { "mData": "UserInRoleId" },
                    { "mData": "Nric" },
                    { "mData": "AdId" },
                    { "mData": "FullName" },
                    { "mData": "EmailAddress" },
                    { "mData": "MobileAlias" },
                    { "mData": "AgencyId" },
                    { "mData": "Designation" },
                    { "mData": "SchemeRole" },
                    //{ "mData": "SchemeName" },
            ]
        });
    })

　　该段JQuery代码，，，注意

"mData"的时候 输入的字段名字一定要与后台list的columns一致，不然获取不到该列的数据，

"oLanguage": {
                "sZeroRecords": "@Messages.General.EmptyData.Format()",
                "sEmptyTable": "@Messages.General.EmptyData.Format()",
            },
改属性为list为空的时候  JQueryTable显示的errormessage ；

"aoColumnDefs": 是自己对datatable每一列的一些扩展定义，比如 当 我点击每一行的名字的时候  链接到Update页面更新该用户的所有信息。
checkbox  每一行自动加上checkbox便于 进行一些操作，批量删除，单个删除等操作。

"targets"  从0 开始  可以定位到每一列 如 0  就是第一列 checkbox。

"render": function (data, type, full)   full为该行的所有数据，data 为该行该列的数据。

下面 为Jquery Datatable 的展示效果，很多属性没设置，，都是根据客户需求来的，，各位可以参考官网自行设置。

加入了checkbox之后由于是根据后台的数据动态的显示的，，所以checkbox的取值 给我了很大的困扰，下面的Jquery方法 是我感觉比较好的一种吧，一般的都是用id取值，但是在相同的id下 我们不得不考虑用id取值的准确性，因此，我们通过class 遍历 对checkbox进行取值。

　　　
        var UserId="";
        $(‘.userCheck‘).each(function () {
            if (this.checked == true) {
                UserId += $(this).attr(‘value‘) + ‘,‘
            }            
        })

　　得到一个string类型的数据，就可以传回后台通过一系列操作，达到自己想要操作的目的了。

自己整理的一些东西

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。

JQuery dataTable 扩展+Ajax Post，Get一些基本操作（一）