bootstrap table 分页_bootstrap表格分页实例代码分享

更新时间:2021-02-25    来源:php常用代码    手机版     字体:

【www.bbyears.com--php常用代码】

本文实例为大家分享了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));  

最终的效果

方便以后可以用到。

本文来源:http://www.bbyears.com/jiaocheng/117610.html