记录一下 bootstrap-table插件的使用

先看下效果图

  1. 首先是导入js

    <!--js jquery -->
    <script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-1.9.0.min.js"></script>
    <!--js bootstrap -->
    <script src="${pageContext.request.contextPath}/bootstrapJs/bootstrap.min.js"></script>
    <!-- js bootstrap-table 分页插件 -->
    <script type="text/javascript"src="${pageContext.request.contextPath}/js/bootstrap-table.js"></script>
    <script src="${pageContext.request.contextPath}/bootstrapJs/table/bootstrap-table-zh-CN.js"></script>
    <!-- js bootstrap-datetimepicker 时间插件 -->
    <script src="${pageContext.request.contextPath}/bootstrapJs/datetimepicker/bootstrap-datetimepicker.min.js"></script>
    <script src="${pageContext.request.contextPath}/bootstrapJs/datetimepicker/bootstrap-datetimepicker.zh-CN.js"></script>
    <!-- js knockout 增删改查 插件 -->
    <script src="https://cdn.bootcss.com/knockout/3.4.0/knockout-min.js"></script>
    <script src="${pageContext.request.contextPath}/bootstrapJs/knockout/knockout.mapping-latest.js"></script>
    <!-- css -->
    <link href="${pageContext.request.contextPath}/css/bootstrap-table.css"rel="stylesheet" type="text/css" />
    <link href="${pageContext.request.contextPath}/bootstrapCss/datetimepicker/bootstrap-datetimepicker.min.css" rel="stylesheet" />

      

  2. 在页面上增加标签,  分页标签有两种方式一种是自己在页面上写,一种是在js中自定义,我选择的是第一种
    <div class="panel-body" style="padding-bottom: 0px;" id="shouRu">
    <div class="panel panel-default">
    <div class="panel-heading">收入类目查询条件</div>
    <div class="panel-body">
    <form id="formSearch" class="form-horizontal">
    <div class="form-group" style="margin-top: 15px">
    <label class="control-label col-sm-1"
    for="txt_search_departmentname">日期:</label>
    <div class="col-sm-3">
    <input placeholder="开始日期" class="form-control layer-date" id="start" name="startDate">
    </div>
    <div class="col-sm-3">
    <input placeholder="结束日期" class="form-control layer-date" id="end" name="endDate">
    </div>
    <div class="col-sm-4" style="text-align: left;">
    <button type="button" style="margin-left: 50px" id="btn_query"
    class="btn" onclick="show();">查询</button>
    </div>
    <span style="display: none" id="span">1</span>
    </div>
    </form>
    </div>
    </div> <div id="toolbar" class="btn-group">
    <button id="btn_add" type="button" class="btn btn-default">
    <span class="glyphicon glyphicon-plus" 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" data-bind="myBootstrapTable:$root"></table>
    </div>

      

  3. 写js
    $(function() {
    // 1.初始化Table
    var oTable = new TableInit();
    oTable.Init();
    }); //定义table显示样式 和后台交互的url
    var TableInit = function() {
    var oTableInit = new Object();
    // 初始化Table
    oTableInit.Init = function() {
    $("#tb_departments").bootstrapTable('destroy');
    $('#tb_departments').bootstrapTable({
    url : '/billMaven/categoryselect', // 请求后台的URL(*)
    method : 'get', // 请求方式(*)
    toolbar : '#toolbar', // 工具按钮用哪个容器
    striped : true, // 是否显示行间隔色
    cache : false, // 是否使用缓存,默认为true,所以一般情况下需要设置一下这个属性(*)
    pagination : true, // 是否显示分页(*)
    sortable : false, // 是否启用排序
    sortOrder : "asc", // 排序方式
    sidePagination : "server", // 分页方式:client客户端分页,server服务端分页(*)
    pageNumber : 1, // 初始化加载第一页,默认第一页
    pageSize : 10, // 每页的记录行数(*)
    pageList : [ 10, 25, 50, 100 ], // 可供选择的每页的行数(*)
    search : true, // 是否显示表格搜索,此搜索是客户端搜索,不会进服务端,所以,个人感觉意义不大
    strictSearch : true,
    showColumns : true, // 是否显示所有的列
    showRefresh : false, // 是否显示刷新按钮
    minimumCountColumns : 1, // 最少允许的列数
    clickToSelect : true, // 是否启用点击选中行
    height : 400, // 行高,如果没有设置height属性,表格自动根据记录条数觉得表格高度
    uniqueId : "id", // 每一行的唯一标识,一般为主键列
    showToggle : true, // 是否显示详细视图和列表视图的切换按钮
    cardView : false, // 是否显示详细视图
    detailView : false, // 是否显示父子表
    queryParamsType : "", //我使用的是向后台传输 page和size 还有另一种方式,请自行百度
    queryParams : oTableInit.queryParams,
    columns : [ {
    checkbox : true
    }, {
    field : 'id', //对应返回的名称
    title : 'id' //自定义名称
    }, {
    field : 'billname',
    title : '收入类目名称'
    }, {
    field : 'creatime',
    title : '类目创建时间', //因为后台返回的时间是时间戳 所以要转换成我们平常看到的日期
    formatter : function(value, row, index) {
    return fmtDate(value)
    }
    }, {
    title : '操作',
    align : 'center',
    formatter : operateFormatter //自定义修改和删除标志 也可以不写
    }, ],
    formatNoMatches: function(){
    return "没有相关的匹配结果";
    }, formatLoadingMessage: function(){
    return "请稍等,正在加载中。。。";
    }
    });
    };
    function fmtDate(obj) { //时间转换的方法
    var date = new Date(obj);
    var y = 1900 + date.getYear();
    var m = "0" + (date.getMonth() + 1);
    var d = "0" + date.getDate();
    var h = date.getHours();
    var mm = date.getMinutes();
    var s = date.getSeconds();
    return y + "-" + m.substring(m.length - 2, m.length) + "-"
    + d.substring(d.length - 2, d.length) + " " + h + ":" + mm
    + ":" + s;
    }
    // 得到查询的参数 条件查询
    oTableInit.queryParams = function(params) {
    var temp = { // 这里的键的名字和控制器的变量名必须一直,这边改动,控制器也需要改成一样的
    size: params.pageSize, // 页面大小
    page: params.pageNumber, // 页码
    startdate : $("#start").val(),
    enddate : $("#end").val(),
    statu : $("#span").html()
    };
    return temp;
    };
    return oTableInit;
    }; var ButtonInit = function() {
    var oInit = new Object();
    var postdata = {}; oInit.Init = function() {
    var oTable = new TableInit();
    oTable.Init();
    }; return oInit;
    };
    //页面上的查询按钮点击事件
    function show() {
    // 2.初始化Button的点击事件
    var oButtonInit = new ButtonInit();
    oButtonInit.Init(); }  
     //操作按钮定义

    function operateFormatter(value, row, index) {
    return [
    '<a class="like" href="javascript:void(0)" title="Update" onclick="remove()">',
    '<i class="glyphicon glyphicon-heart" onclick="remove()"></i>',
    '</a> ',
    '<a class="remove" href="javascript:void(0)" title="Remove">',
    '<i class="glyphicon glyphicon-remove"></i>', '</a>' ].join('');
    }

bootstrap-table 分页增删改查之一(分页)的更多相关文章

  1. 用SpringBoot+MySql+JPA实现对数据库的增删改查和分页

    使用SpringBoot+Mysql+JPA实现对数据库的增删改查和分页      JPA是Java Persistence API的简称,中文名Java持久层API,是JDK 5.0注解或XML描述 ...

  2. SpringBoot JPA实现增删改查、分页、排序、事务操作等功能

    今天给大家介绍一下SpringBoot中JPA的一些常用操作,例如:增删改查.分页.排序.事务操作等功能.下面先来介绍一下JPA中一些常用的查询操作: //And --- 等价于 SQL 中的 and ...

  3. SpringBoot-Vue实现增删改查及分页小DEMO

    前言 主要通过后端 Spring Boot 技术和前端 Vue 技术来简单开发一个demo,实现增删改查.分页功能以及了解Springboot搭配vue完成前后端分离项目的开发流程. 开发栈 前端 开 ...

  4. 【BootStrap】--具有增删改查功能的表格Demo

    [BootStrap]--具有增删改查功能的表格Demo 目录(?)[+] 前言 版本一 样式 代码 版本二 样式 代码 版本三 样式 代码 总结 前言 bootstrap的表格样式,有类似EasyU ...

  5. MYSQL - database 以及 table 的增删改查

    MYSQL - database 以及 table 的增删改查 MySQL的相关概念介绍 MySQL 为关系型数据库(Relational Database Management System), 这 ...

  6. bootstrap-table 分页增删改查之一(增加 删除)

    先上效果图 引入js文件 <!--js jquery --> <script type="text/javascript" src="${pageCon ...

  7. springDataJPQL实现增删改查及分页,原生sql查询,根据方法命名规则实现查询以及Specification查询

    一.使用方法 1.在dao中定义开一个方法,使用方法的参数设置jpql,并且使用方法的返回值接受查询结果,在方法上添加@query注解,在注解中写jpql语句进行增删改查,测试 2.使用原生的sql语 ...

  8. Magicodes.WeiChat——ASP.NET Scaffolding生成增删改查、分页、搜索、删除确认、批量操作、批量删除等业务代码

    关于T4代码生成这块,我之前写过几篇帖子,如:<Magicodes.NET框架之路——让代码再飞一会(ASP.NET Scaffolding)>(http://www.cnblogs.co ...

  9. JavaWeb学习记录(七)——MVC操作数据库增删改查与分页功能

    一.分页工具类 package blank.util;import java.util.List; import org.springframework.jdbc.core.JdbcTemplate; ...

随机推荐

  1. HLS:OpenCV和RTL代码转换关系

    OpenCV 图像处理是基于存储器帧缓存而构建的, 它总是假设视频帧数据存放在外部 DDR 存储器中. 由于处理器的小容量高速缓存性能的限制, 因此, OpenCV 访问局部图像性能较差. 并且, 从 ...

  2. Linux/Mac安装oh-my-zsh后不执行~/.bash_profile、~/.bashrc解决办法

    安装了zsh之后默认启动执行脚本变为了-/.zshrc. 解决办法: Mac: 修改-/.zshrc文件,在其中添加:source -/.bash_profile.source -/.bashrc:注 ...

  3. try -catch-finally一些要点

    try -catch-finally是处理程序异常时使用,当程序正常时,先走try然后到finally语句,不正常时:程序先走try,然后到catch里面的语句,最后到finally;从上面可以看出, ...

  4. java中Filter过滤器处理中文乱码的方法

    注意问题:在学习用selvert的过滤器filter处理中文乱码时,在filter配置初始化时用了utf-8处理中文乱码,而在提交的jsp页面中却用了gbk.虽然两种都可以出来中文乱码,但是却造成了处 ...

  5. PHP之string

    string addcslashes() Quote string with slashes in a C style 以 C 语言风格使用反斜线转义字符串中的字符 addslashes() Quot ...

  6. mysql重复数据查询

    假设有表test mysql> select * from test; +----+------+------+ | id | name | sex | +----+------+------+ ...

  7. 很实用的web性能测试插件:Yslow , PageSpeed

    package org.springframework.web.servlet.resource; import java.io.IOException; import java.io.Unsuppo ...

  8. [转]Charts (Report Builder and SSRS)

    本文转自:https://docs.microsoft.com/en-us/sql/reporting-services/report-design/charts-report-builder-and ...

  9. 第4章 scrapy爬取知名技术文章网站(1)

    4-1 scrapy安装以及目录结构介绍 安装scrapy可以看我另外一篇博文:Scrapy的安装--------Windows.linux.mac等操作平台,现在是在虚拟环境中安装可能有不同. 1. ...

  10. Java如何大批量从json数据源中按指定符号隔字符串,并修改、删除数据

    原文出自:https://blog.csdn.net/seesun2012 package com.seesun2012.com; /** * Java大批量修改.删除数据,按指定标识符分隔字符串 * ...