本文实例为大家分享了bootstrap表格分页的具体实现代码,供大家参考,具体内容如下
引用:
代码如下 <scriptsrc="~/Scripts/jquery.min.js"></script> <scriptsrc="~/Scripts/bootstrap.min.js"></script> <scriptsrc="~/Scripts/plugins/bootstrap-table/bootstrap-table.min.js"></script> <scriptsrc="~/Scripts/plugins/bootstrap-table/locale/bootstrap-table-zh-CN.min.js"></script>html代码:
代码如下js代码:
代码如下 varTableInit =function() { varoTableInit =newObject(); //初始化Table oTableInit.Init =function() { $("#tb_departments").bootstrapTable({ url:"/Active/ActivityS", //请求后台的URL(*) method:"post", //请求方式(*) toolbar:"#toolbar", //工具按钮用哪个容器 striped:true, //是否显示行间隔色 cache:false, //是否使用缓存,默认为true,所以一般情况下需要设置一下这个属性(*) pagination:true, //是否显示分页(*) sortable:false, //是否启用排序 sortOrder:"asc", //排序方式 queryParams: oTableInit.queryParams,//传递参数(*) sidePagination:"server", //分页方式:client客户端分页,server服务端分页(*) pageNumber: 1, //初始化加载第一页,默认第一页 pageSize: 10, //每页的记录行数(*) pageList: [10, 25, 50, 100], //可供选择的每页的行数(*) search:true, //是否显示表格搜索,此搜索是客户端搜索,不会进服务端,所以,个人感觉意义不大 strictSearch:true, showColumns:true, //是否显示所有的列 showRefresh:true, //是否显示刷新按钮 minimumCountColumns: 2, //最少允许的列数 clickToSelect:true, //是否启用点击选中行 //height: 500, //行高,如果没有设置height属性,表格自动根据记录条数觉得表格高度 uniqueId:"ActivityGuid", //每一行的唯一标识,一般为主键列 showToggle:true, //是否显示详细视图和列表视图的切换按钮 cardView:false, //是否显示详细视图 detailView:false, //是否显示父子表 columns: [{ checkbox:true }, { field:"ActivityGuid", title:"活动报名主键" }, { field:"Name", title:"活动名称" }, { field:"Introduction", title:"活动简介" }, { field:"StartDateTime", title:"活动开始时间" }, { field:"EndDateTime", title:"活动结束时间" }, { field:"TotalPlaces", title:"活动总名额" }, { field:"ActivityType", title:"活动类型" }, { field:"AccountGuid", title:"操作人" }, { field:"isLine", title:"是否上线" }, { field:"isMail", title:"是否邮寄" }, ] }); }; //得到查询的参数 oTableInit.queryParams =function(params) { vartemp = {//这里的键的名字和控制器的变量名必须一直,这边改动,控制器也需要改成一样的 limit: params.limit,//页面大小 offset: params.offset,//页码 departmentname:"aa", statu:"true", search: params.search }; returntemp; }; returnoTableInit; }; varButtonInit =function() { varoInit =newObject(); varpostdata = {}; oInit.Init =function() { //初始化页面上面的按钮事件 }; returnoInit; };后台对应的方法
代码如下 [HttpPost] publicActionResult ActivityS(intlimit,intoffset,stringactiveName,stringonline,stringsearch) { var list =newList(); DataTable dt = bll.GetActivity(); for(inti = 0; i < dt.Rows.Count; i++) { Activitys model =newActivitys(); model.ActivityGuid = dt.Rows[i]["ActivityGuid"].ToString(); model.Name = dt.Rows[i]["Name"].ToString(); model.Introduction = dt.Rows[i]["Introduction"].ToString(); model.StartDateTime = Convert.ToDateTime(dt.Rows[i]["StartDateTime"]); model.EndDateTime = Convert.ToDateTime(dt.Rows[i]["EndDateTime"]); model.TotalPlaces = Convert.ToInt32(dt.Rows[i]["TotalPlaces"]); model.ActivityType = Convert.ToInt32(dt.Rows[i]["ActivityType"]); model.AccountGuid = dt.Rows[i]["AccountGuid"].ToString(); model.isLine = dt.Rows[i]["isLine"].ToString() =="1"?false:true; model.isMail = dt.Rows[i]["isMail"].ToString() =="1"?false:true; list.Add(model); } //去除时间带T var iso =newIsoDateTimeConverter(); iso.DateTimeFormat ="yyyy-MM-dd"; var pageCount = dt.Rows.Count; var rows = list.Skip(offset).Take(limit).ToList(); returnContent(JsonConvert.SerializeObject(new{ total = pageCount, rows = rows }, iso));最终的效果
方便以后可以用到。
bootstrap table 分页_bootstrap表格分页实例代码分享
http://m.bbyears.com/jiaocheng/117610.html
推荐访问:bootstrap分页组件