手机网站改app,网站建设作业过程,网页源代码简单,工业设计公司取名最近项目中用到了BootStrap做后台#xff0c;在选择表格插件的时候发现了jquery datatables。 功能是很强大#xff0c;但是网上的例子比较少。在经过一段时间的努力可算是搞出来了。 官网地址#xff1a;http://www.datatables.net/ 官网上的例子比较简单#xff0c;基础的… 最近项目中用到了BootStrap做后台在选择表格插件的时候发现了jquery datatables。 功能是很强大但是网上的例子比较少。在经过一段时间的努力可算是搞出来了。 官网地址http://www.datatables.net/ 官网上的例子比较简单基础的介绍还是要看看的。 效果图 引入相应css 和js link hrefhttp://cdn.datatables.net/1.10.5/css/jquery.dataTables.css relstylesheet /script srchttp://code.jquery.com/jquery-1.11.1.min.js/scriptscript srchttp://cdn.datatables.net/1.10.5/js/jquery.dataTables.min.js/script 页面HTML div classportlet-body p10div classform-body div classrowdiv classcol-md-5div classform-grouplabel classcontrol-label col-md-3User Name: /labeldiv classcol-md-6input idtxt_UserName nametxt_UserName typetext value /span classhelp-blockThis is inline help /span/div/div/div!--/span--div classcol-md-5div classform-grouplabel classcontrol-label col-md-4Division/labeldiv classcol-md-6 form-inlineselect idSel_Division nameGenderoption value全部/optionoption valueAA/optionoption valueBB/option/select/div/div/div!--/span--/divdiv classrowdiv classcol-md-5/div!--/span--div classcol-md-5div classform-groupbutton typesubmit idbtn_Search classbtn greenSearch/button/div/div!--/span--/div/div/divdiv classportlet-body p10table classtable table-striped table-bordered table-hover idUserListtheadtrthUser ID/ththUser Ename/ththAD Account/ththUser Email/ththDivision/ththEntity/ththIsValid/ththOperation/th/tr/thead/table/div 我这里用到的是 服务器端处理。很少有人把数据全部取出来让js 处理的吧。。。 JS 代码 初始化 var oTable null;
var initUserList function () {var table $(#UserList);
if (oTable null) { //仅第一次检索时初始化Datatable oTable table.dataTable({bLengthChange: false, //改变每页显示数据数量bFilter: false, //过滤功能bProcessing: true, //开启读取服务器数据时显示正在加载中……特别是大数据量的时候开启此功能比较好bServerSide: true, //开启服务器模式使用服务器端处理配置datatable。注意sAjaxSource参数也必须被给予为了给datatable源代码来获取所需的数据对于每个画。 这个翻译有点别扭。iDisplayLength: 10,//每页显示10条数据//ajax地址 sAjaxSource: /Home/Home/GetUserList,// get地址//sAjaxSource: /Home/Home/UserListPost,// post地址fnServerData: retrieveData,//执行方法//默认排序order: [[0, asc]//第一列正序],lengthMenu: [[5, 15, 20, -1],[5, 15, 20, All] // change per page values here],// set the initial valuepageLength: 10,//向服务器传额外的参数fnServerParams: function (aoData) {aoData.push({ name: UserName, value: $(#txt_UserName).val() },//员工名字{ name: Division, value: $(#Sel_Division).val() })//所处Division},//配置列要显示的数据columns: [{ data: User_ID },{ data: User_Ename },{ data: AD_Account },{ data: User_Email },{ data: Division },{ data: Entity },{ data: IsValid },{ data: }//操作按钮列],//按钮列columnDefs: [//{// targets: -2,//编辑// data: null,// defaultContent: button ideditrow classbtn btn-primary typebuttoni classfa fa-edit/i/button//},{targets: -1,//删除data: null,defaultContent: button ideditrow classbtn btn-primary typebuttoni classfa fa-edit/i/buttonbutton iddelrow classbtn btn-primary typebuttoni classfa fa-trash-o/i/button}] ,//语言配置--页面显示的文字language: {aria: {sortAscending: : activate to sort column ascending,sortDescending: : activate to sort column descending},emptyTable: No data available in table,info: Showing _START_ to _END_ of _TOTAL_ entries,infoEmpty: No entries found,infoFiltered: (filtered1 from _MAX_ total entries),lengthMenu: Show _MENU_ entries,search: Search:,zeroRecords: No matching records found}});}//刷新Datatable会自动激发retrieveData oTable.fnDraw();// tableWrapper.find(.dataTables_length select).select2(); // initialize select2 dropdown
} function retrieveData(sSource, aoData, fnCallback) {/* get 方法调用*/$.ajax({type: get,contentType: application/json,url: sSource,dataType: json,data: aoData, success: function (resp) {fnCallback(resp); //服务器端返回的对象的returnObject部分是要求的格式 }});/* Post 方法调用$.ajax({type: post,url: sSource,dataType: json,data: aoData,success: function (resp) {fnCallback(resp); //服务器端返回的对象的returnObject部分是要求的格式 }});*/
} jQuery(document).ready(function () {initUserList()//搜索$(#btn_Search).click(function () {initUserList()})//按钮的绑定事件要放到document或者其他父标签上因为元素是在datatable方法加载完成之后才显示出来的//编辑$(.portlet-body).on(click, button#editrow, function () {var data $(#UserList).DataTable().row($(this).parents(tr)).data();alert(data.User_Ename s Division is: data.Division);});//删除$(.portlet-body).on(click, button#delrow, function () {var data $(#UserList).DataTable().row($(this).parents(tr)).data();alert(Do you want delete data.User_Ename ?);});}); 后台代码 开启后台处理之后每次翻页、排序都会调用代码中配置的地址/Home/Home/GetUserList 回传很多参数我们这里只用到这几个 页面大小iDisplayLength 开始数iDisplayStart是开始数不是当前页数... 要排序的列序号:iSortCol_0从零开始 正序还是倒序sSortDir_0desc or asc 获取第一列列明mDataProp_0从零开始 好了上代码 [HttpGet]public string GetUserList(){//JsonConvert.PopulateObject(var re new UserRequest();//获取页面大小if (string.IsNullOrWhiteSpace(Request[iDisplayLength]))re.PageSize 10; elsere.PageSize int.Parse(Request[iDisplayLength]);//获取开始数 算出当前页数if (string.IsNullOrWhiteSpace(Request[iDisplayStart]))re.PageIndex 1; elsere.PageIndex (int.Parse(Request[iDisplayStart]) / re.PageSize) 1;//自定义的两个参数 Division和UserNameif (!string.IsNullOrWhiteSpace(Request[Division]))re.Division Request[Division];if (!string.IsNullOrWhiteSpace(Request[UserName]))re.User_Ename Request[UserName];//排序if (!string.IsNullOrWhiteSpace(Request[iSortCol_0]) !string.IsNullOrWhiteSpace(Request[sSortDir_0]))re.OrderBy Request[(mDataProp_ Request[iSortCol_0])];// Request[sSortDir_0];elsere.OrderBy Request[(mDataProp_0)];//正序还是倒序if(!string.IsNullOrWhiteSpace(Request[sSortDir_0]))re.Isdesc(Request[sSortDir_0]descdesc?true:false);var result new DataResult();var data this.AccountService.GetUserList(re);//获取数据的方法result.recordsTotal data.TotalItemCount;result.recordsFiltered data.TotalItemCount;result.data data;return JsonConvert.SerializeObject(result);} public class UserRequest : Request{public UserRequest() { Isdesc false; }public string User_Ename { get; set; }public string Division { get; set; }public bool IsValid { get; set; }public long User_ID { get; set; }public string OrderBy { get; set; }public bool Isdesc { get; set; }} public class DataResult{public int draw { get; set; }public int recordsTotal { get; set; }public int recordsFiltered { get; set; }public object data;} 基本就这些了。嘿嘿本人技术稀烂大神见笑了。 转载于:https://www.cnblogs.com/178mz/p/4383519.html
