bootstrap表格分页实例讲解

本文实例为大家分享了bootstrap表格分页的具体实现代码，供大家参考，具体内容如下

引用：

html代码：

  
   查 询
   

    

     
活动日期：
     

      

 
 到
 

      
 
     
     
活动名称：
     

      
     
     
是否推荐：
     

    
    

     
活动名称：
     

     
是否上线：
     

 
    
   
  
 
  
   
    新增
   
   
    修改
   
   
    删除
   
  
 

js代码：　　

var TableInit = function () {
   var oTableInit = new Object();
   //初始化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) {
    var temp = { //这里的键的名字和控制器的变量名必须一直，这边改动，控制器也需要改成一样的
     limit: params.limit, //页面大小
     offset: params.offset, //页码
     departmentname: "aa",
     statu: "true",
     search: params.search
    };
    return temp;
   };
   return oTableInit;
  };
 
  var ButtonInit = function () {
   var oInit = new Object();
   var postdata = {};
 
   oInit.Init = function () {
    //初始化页面上面的按钮事件
   };
   return oInit;
  };

后台对应的方法

[HttpPost]
  public ActionResult ActivityS(int limit, int offset, string activeName, string online, string search)
  {
   var list = new List();
   DataTable dt = bll.GetActivity();
   for (int i = 0; i < dt.Rows.Count; i++)
   {
    Activitys model = new Activitys();
    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 = new IsoDateTimeConverter();
   iso.DateTimeFormat = "yyyy-MM-dd";
 
   var pageCount = dt.Rows.Count;
   var rows = list.Skip(offset).Take(limit).ToList();
   return Content(JsonConvert.SerializeObject(new { total = pageCount, rows = rows }, iso));

最终的效果

方便以后可以用到。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持考高分网。