javascript代码实例教程-JQuery dataTable 扩展+Ajax Post,Get一些基本操作(一)

发布时间:2019-01-22 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了javascript代码实例教程-JQuery dataTable 扩展+Ajax Post,Get一些基本操作(一)脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
小宝典致力于为广大程序猿(媛)提供高品质的代码服务,请大家多多光顾小站,小宝典在此谢过。 首先, Asp.net MVC 系列暂时没有发现封装好的 类似于web form 的datagrid, 只有一款jquery 的dataTable , 官网地址 https://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: https://www.datatables.net, the next ,i will list  some examples  that i have meet some issues in PRoject),

 

直接上视图代码

 

复制代码

<form method="post" onsubmit="return MaintainDel();">

    <p id=";message">

        <h3 style="color:red">@ViewBag.mes</h3>

    </p>

    <input id="ChooseUserId" name="ChooseUserId" tyPE="hidden" />

    <p class="row">

        <p class="col-lg-12">

            <p class="panel panel-default">

                <!--<p class="panel-heading">

                    Users

                </p>-->

 

                <p class="panel-body">

                    <p 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>

                    </p>

                </p>

            </p>

        </p>

    </p>

    <p 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" />

    </p>

    </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 = $(&#39;#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一致,不然获取不到该列的数据,<br><br>

 

"oLanguage": {

                "sZeroRecords": "@Messages.General.EmptyData.Format()",

                "sEmptyTable": "@Messages.General.EmptyData.Format()",

            },<br>改属性为list为空的时候  JQueryTable显示的errormessage ;<br><br>

 

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

 

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

 

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

觉得可用,就经常来吧! 脚本宝典 欢迎评论哦! js脚本,巧夺天工,精雕玉琢。小宝典献丑了!

脚本宝典总结

以上是脚本宝典为你收集整理的javascript代码实例教程-JQuery dataTable 扩展+Ajax Post,Get一些基本操作(一)全部内容,希望文章能够帮你解决javascript代码实例教程-JQuery dataTable 扩展+Ajax Post,Get一些基本操作(一)所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。