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事件问题
Sep 05 Javascript
避免 showModalDialog 弹出新窗体的原因分析
May 31 Javascript
js封装的textarea操作方法集合(兼容很好)
Nov 16 Javascript
2010年最佳jQuery插件整理
Dec 06 Javascript
jQuery提交多个表单的小技巧
Jul 27 Javascript
jQuery窗口拖动功能的实现代码
Feb 04 Javascript
AngularJS之ionic 框架下实现 Localstorage本地存储
Apr 22 Javascript
vue2.0实现分页组件的实例代码
Jun 22 Javascript
详解用Node.js写一个简单的命令行工具
Mar 01 Javascript
webpack@v4升级踩坑(小结)
Oct 08 Javascript
JavaScript中ES6规范中let和const的用法和区别
Aug 06 Javascript
利用js实现简单开关灯代码
Nov 23 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 5.0对象模型深度探索之绑定
2006/09/05 PHP
PHP的类 功能齐全的发送邮件类
2006/10/09 PHP
三种php连接access数据库方法
2013/11/11 PHP
php ci 获取表单中多个同名input元素值的代码
2016/03/25 PHP
javascript读取RSS数据
2007/01/20 Javascript
js中方法重载如何实现?以及函数的参数问题
2013/08/01 Javascript
jquery ajax修改全局变量示例代码
2013/11/08 Javascript
IE下支持文本框和密码框placeholder效果的JQuery插件分享
2015/01/31 Javascript
使用 TypeScript 重新编写的 JavaScript 坦克大战游戏代码
2015/04/07 Javascript
JavaScript实现选择框按比例拖拉缩放的方法
2015/08/04 Javascript
JS面向对象编程详解
2016/03/06 Javascript
基于jquery实现无限级树形菜单
2016/03/22 Javascript
Ionic快速安装教程
2016/06/03 Javascript
JavaScript中英文字符长度统计方法示例【按照中文占2个字符】
2017/01/17 Javascript
Javascript中for循环语句的几种写法总结对比
2017/01/23 Javascript
JS作用域链详解
2017/06/26 Javascript
AngularJS中controller控制器继承的使用方法
2017/11/03 Javascript
jquery动态添加带有样式的HTML标签元素方法
2018/02/24 jQuery
在Express中提供静态文件的实现方法
2019/10/17 Javascript
js实现随机点名
2021/01/19 Javascript
python使用reportlab画图示例(含中文汉字)
2013/12/03 Python
Python实现KNN邻近算法
2021/01/28 Python
Python爬虫实例扒取2345天气预报
2018/03/04 Python
django rest framework 数据的查找、过滤、排序的示例
2018/06/25 Python
PyTorch的Optimizer训练工具的实现
2019/08/18 Python
python yield关键词案例测试
2019/10/15 Python
Windows10+anacond+GPU+pytorch安装详细过程
2020/03/24 Python
华丽的手绘陶瓷:MacKenzie-Childs
2017/02/04 全球购物
Viking Direct荷兰:购买办公用品
2019/06/20 全球购物
Notino希腊:购买香水和美容产品
2019/07/25 全球购物
罗马尼亚在线杂货店:Pilulka.ro
2019/09/28 全球购物
施华洛世奇巴西官网:SWAROVSKI巴西
2019/12/03 全球购物
KOHLER科勒美国官网:国际著名卫浴橱柜领先品牌
2020/06/27 全球购物
总务岗位职责
2013/11/19 职场文书
购房意向书范本
2014/04/01 职场文书
Java线程的6种状态与生命周期
2022/05/11 Java/Android