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 相关文章推荐
仿猪八戒网左下角的文字滚动效果
Oct 28 Javascript
jquery ajax传递中文参数乱码问题及解决方法说明
Feb 07 Javascript
javascript搜索框点击文字消失失焦时文本出现
Sep 18 Javascript
谈谈Jquery中的children find 的区别有哪些
Oct 19 Javascript
纯javascript版日历控件
Nov 24 Javascript
jQuery插件zTree实现单独选中根节点中第一个节点示例
Mar 08 Javascript
基于ExtJs在页面上window再调用Window的事件处理方法
Jul 26 Javascript
图文讲解用vue-cli脚手架创建vue项目步骤
Feb 12 Javascript
vue实现随机验证码功能的实例代码
Apr 30 Javascript
vue父子组件间引用之$parent、$children
May 20 Javascript
jQuery实现简单评论功能
Aug 19 jQuery
vue element-ui中table合计指定列求和实例
Nov 02 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
用文本作数据处理
2006/10/09 PHP
PHP_NETWORK_GETADDRESSES: GETADDRINFO FAILED问题解决办法
2014/05/04 PHP
centos+php+coreseek+sphinx+mysql之一coreseek安装篇
2016/10/25 PHP
浅谈PHP错误类型及屏蔽方法
2017/05/27 PHP
PHP单例模式与工厂模式详解
2017/08/29 PHP
用JS剩余字数计算的代码
2008/07/03 Javascript
用js写了一个类似php的print_r输出换行功能
2013/02/18 Javascript
ECMAScript 6即将带给我们新的数组操作方法前瞻
2015/01/06 Javascript
JQuery中两个ul标签的li互相移动实现方法
2015/05/18 Javascript
深入理解JavaScript中的浮点数
2016/05/18 Javascript
AngularJs定制样式插入到ueditor中的问题小结
2016/08/01 Javascript
DOM中事件处理概览与原理的全面解析
2016/08/16 Javascript
简单理解Vue条件渲染
2016/12/03 Javascript
Vue2.x中的父子组件相互通信的实现方法
2017/05/02 Javascript
js实现rem自动匹配计算font-size的示例
2017/11/18 Javascript
打通前后端构建一个Vue+Express的开发环境
2018/07/17 Javascript
Vue中import from的来源及省略后缀与加载文件夹问题
2020/02/09 Javascript
javascript 设计模式之享元模式原理与应用详解
2020/04/08 Javascript
js实现表格数据搜索
2020/08/09 Javascript
python 实现插入排序算法
2012/06/05 Python
Python实现抓取页面上链接的简单爬虫分享
2015/01/21 Python
老生常谈进程线程协程那些事儿
2017/07/24 Python
提升Python程序性能的7个习惯
2019/04/14 Python
Apache部署Django项目图文详解
2019/07/30 Python
将tf.batch_matmul替换成tf.matmul的实现
2020/06/18 Python
Python如何读取、写入CSV数据
2020/07/28 Python
Python使用正则表达式实现爬虫数据抽取
2020/08/17 Python
用python监控服务器的cpu,磁盘空间,内存,超过邮件报警
2021/01/29 Python
纯CSS3单页切换导航菜单界面设计的简单实现
2016/08/16 HTML / CSS
新加坡网上化妆品店:Best Buy World
2018/05/18 全球购物
adidas瑞典官方网站:购买阿迪达斯鞋子和运动服
2019/12/11 全球购物
Big Green Smile法国:领先的英国有机和天然产品在线商店
2021/01/02 全球购物
家长对孩子的感言
2014/03/10 职场文书
社区综治工作汇报
2014/10/27 职场文书
2014年大学生工作总结
2014/11/20 职场文书
学校施工安全责任书
2015/01/29 职场文书