bootstrap表格分页实例讲解


Posted in Javascript onDecember 30, 2016

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

引用:

<script src="~/Scripts/jquery.min.js"></script>
<script src="~/Scripts/bootstrap.min.js"></script>
<script src="~/Scripts/plugins/bootstrap-table/bootstrap-table.min.js"></script>
<script src="~/Scripts/plugins/bootstrap-table/locale/bootstrap-table-zh-CN.min.js"></script>

html代码:

<div class="panel-body" style="padding-bottom:0px;">
  <div class="tableWrap">
   <div class="cxbottom"><button type="submit" class="cxbtn" onclick="Search();">查 询</button></div>
   <table width="100%" border="0">
    <tr>
     <th width="12%">活动日期:</th>
     <td width="21%">
      <div class="" id="data_5">
       <div class="input-daterange input-group" id="datepicker">
        <input type="text" class="input-sm form-control" name="start" value="2014-11-11" />
        <span class="input-group-addon">到</span>
        <input type="text" class="input-sm form-control" name="end" value="2014-11-17" />
       </div>
      </div>
 
     </td>
     <th width="12%">活动名称:</th>
     <td width="21%">
      <input type="text" placeholder="" class="form-control" style="border-radius:3px; height:30px" id="activeName">
     </td>
     <th width="12%">是否推荐:</th>
     <td width="22%"><input type="checkbox" class="js-switch" checked /></td>
    </tr>
    <tr>
     <th>活动名称:</th>
     <td><input type="text" placeholder="" class="form-control" style="border-radius:3px; height:30px"></td>
     <th>是否上线:</th>
     <td><input type="text" placeholder="" class="form-control" style="border-radius:3px; height:30px" id="online"></td>
 
    </tr>
   </table>
  </div>
 
  <div id="toolbar" class="btn-group">
   <button id="btn_add" type="button" class="btn btn-default" data-toggle="modal" data-target="#modal-form">
    <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>新增
   </button>
   <button id="btn_edit" type="button" class="btn btn-default">
    <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>修改
   </button>
   <button id="btn_delete" type="button" class="btn btn-default">
    <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>删除
   </button>
  </div>
 <table id="tb_departments"></table>

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<Activitys>();
   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));

最终的效果

bootstrap表格分页实例讲解

方便以后可以用到。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript 使用技巧精萃(.net html
Apr 25 Javascript
jQuery Pagination Ajax分页插件(分页切换时无刷新与延迟)中文翻译版
Jan 11 Javascript
JavaScript 开发工具webstrom使用指南
Dec 09 Javascript
JavaScript修改浏览器tab标题小技巧
Jan 06 Javascript
JavaScript正则表达式校验与递归函数实际应用实例解析
Aug 04 Javascript
angular2系列之路由转场动画的示例代码
Nov 09 Javascript
详解webpack-dev-server 设置反向代理解决跨域问题
Apr 18 Javascript
解决vue A对象赋值给B对象,修改B属性会影响到A的问题
Sep 25 Javascript
在webstorm开发微信小程序之使用阿里自定义字体图标的方法
Nov 15 Javascript
JS中数据结构之栈
Jan 01 Javascript
vue 左滑删除功能的示例代码
Jan 28 Javascript
vue多个元素的样式选择器问题
Nov 29 Javascript
js中数组的常用方法小结
Dec 30 #Javascript
原生js实现可爱糖果数字时间特效
Dec 30 #Javascript
JS实现颜色梯度与渐变效果完整实例
Dec 30 #Javascript
详解JS对象封装的常用方式
Dec 30 #Javascript
Jquery EasyUI Datagrid右键菜单实现方法
Dec 30 #Javascript
jQuery与js实现颜色渐变的方法
Dec 30 #Javascript
javascript工厂模式和构造函数模式创建对象方法解析
Dec 30 #Javascript
You might like
PHP如何编写易读的代码
2007/07/10 PHP
hadoop中一些常用的命令介绍
2013/06/19 PHP
Django 中 cookie的使用
2017/08/17 PHP
php设计模式之工厂方法模式分析【星际争霸游戏案例】
2020/01/23 PHP
jQuery实现选中弹出窗口选择框内容后赋值给文本框的方法
2015/11/23 Javascript
BootstrapTable与KnockoutJS相结合实现增删改查功能【一】
2016/05/10 Javascript
JavaScript基于面向对象实现的猜拳游戏
2018/01/03 Javascript
vue的.vue文件是怎么run起来的(vue-loader)
2018/12/10 Javascript
js canvas实现星空连线背景特效
2019/11/01 Javascript
toString.call()通用的判断数据类型方法示例
2020/08/28 Javascript
PyQt5实现暗黑风格的计时器
2019/07/29 Python
python opencv鼠标事件实现画框圈定目标获取坐标信息
2020/04/18 Python
Django admin管理工具TabularInline类用法详解
2020/05/14 Python
解决Keras TensorFlow 混编中 trainable=False设置无效问题
2020/06/28 Python
10款最佳Python开发工具推荐,每一款都是神器
2020/10/15 Python
Ubuntu权限不足无法创建文件夹解决方案
2020/11/14 Python
迪斯尼商品官方网站:ShopDisney
2016/08/01 全球购物
德国婴儿推车和儿童安全座椅商店:BABYSHOP
2016/09/01 全球购物
澳洲女装时尚在线:Blue Bungalow
2018/05/05 全球购物
Under Armour西班牙官网:美国知名的高端功能性运动品牌
2018/12/12 全球购物
IdealFit官方网站:女性蛋白质、补充剂和运动服装
2019/03/24 全球购物
Lungolivigno Fashion官网:高级时装在线购物
2020/10/17 全球购物
JMS中Topic和Queue有什么区别
2013/05/15 面试题
架构师岗位职责
2013/11/18 职场文书
你懂得怎么写自荐信吗?
2013/12/27 职场文书
毕业生简历自我评价范文
2014/04/09 职场文书
诚信考试倡议书
2014/04/15 职场文书
职位说明书范文
2014/05/07 职场文书
美术第二课堂活动总结
2014/07/08 职场文书
劳模先进事迹材料
2014/12/24 职场文书
个人委托书范文
2015/01/28 职场文书
生日赠语
2015/06/23 职场文书
2016年小学“感恩教师”主题队日活动总结
2016/04/01 职场文书
Nginx已编译的nginx-添加新模块
2021/04/01 Servers
聊聊pytorch测试的时候为何要加上model.eval()
2021/05/23 Python
Python中rapidjson参数校验实现
2021/07/25 Python