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

首先， 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" οnsubmit="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" οnclick="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的代码：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28

[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中获取。

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

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

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38

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的一些属性，大家就百度吧，，有用到的再说。

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67

$(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代码 ，，，注意

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

1 2 3 4

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

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

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

1	"render" : function (data, type, full)   full为该行的所有数据，data 为该行该列的数据。<br><br>下面 为Jquery Datatable 的展示效果，很多属性没设置，，都是根据客户需求来的，，各位可以参考官网自行设置。<br><br>

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

1 2 3 4 5 6 7

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

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

自己整理的一些东西

1

<br><br>