首页 > 代码库 > JQuery dataTable 扩展+Ajax Post，Get一些基本操作（一）
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" 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=http://www.mamicode.com/"Add User" onclick="AddUser();" name="btnaction" /> <input id="DelUserInfo" type="submit" class="btn btn-default" value=http://www.mamicode.com/"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 = http://www.mamicode.com/user>一个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="http://www.mamicode.com/‘ +"@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="http://www.mamicode.com/‘ + 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一些基本操作（一）
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。