JQuery dataTable 扩展+Ajax Post,Get一些基本操作(一

页面导航:首页 > 网络编程 > JavaScript > JQuery dataTable 扩展+Ajax Post,Get一些基本操作(一

JQuery dataTable 扩展+Ajax Post,Get一些基本操作(一

来源: 作者: 时间:2016-02-20 09:49 【

首先, Asp net MVC 系列暂时没有发现封装好的 类似于web form 的datagrid, 只有一款Jquery 的dataTable , 官网地址 http: www datatables net, 接下来讲解一下关于自己在项目中对datatable进行扩
首先, 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中获取。
 
1
[MyAuthorize(ActionName = ActionCode.MaintainSuperUserAdmin)]这段是用户权限过滤器 就不细讲,可用可不用。 主要代码为
1
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
          /
Tags:

文章评论


<