脚本宝典收集整理的这篇文章主要介绍了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" />
<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 = $('#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,请注明来意。