`

bootstrap table

bootstrap table 分页 
阅读更多

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ include file="/include.jsp"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<!DOCTYPE html PUBLIC "-//W3C//Dth HTML 4.01 TranstablePatentBasicItemional//EN" "http://www.w3.org/TR/html4/loose.dth">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<jsp:include page="includePage.jsp"/>
<script type="text/javascript">
$(function () {
    /* jquery ui datepicker日期插件 */
    $(".datepicker").datepicker({dateFormat: "yy-mm-dd"});
   
    /* 查询 */
    $("#searchBtn").click(function(){
        $('#eventsTable').bootstrapTable('refresh',
                {query: {'codeAbb': $('#codeAbb').val(),
                             'codeCn': $('#codeCn').val(),
                                'codeEn': $('#codeEn').val(),
                             'fromTime': $('#fromTime').val(),
                             'toTime': $('#toTime').val()}});
                });
   
    //1.初始化Table
    var oTable = new TableInit();
    oTable.Init();

    //2.初始化Button的点击事件
    var oButtonInit = new ButtonInit();
    oButtonInit.Init();
   
   
    $("#btn_add").click(function(){
        location.href="<%=path%>/admin/login/toAdd.htm";
    });
    $("#btn_edit").click(function(){
        var selects = $('#eventsTable').bootstrapTable('getSelections');
        if(selects.length == 0){
            alert("请选择一条要修改！");
        }else{
            location.href = "<%=path%>/admin/login/toUpdate.htm?id="+selects[0].id;
        }
    });
   
    $("#btn_delete").click(function(){
        var selects = $('#eventsTable').bootstrapTable('getSelections');
        if(selects.length == 0){
            alert("请选择一条要删除的对象！");
        }else{
            if(window.confirm("确定要删除此用户？")){
                $.get("<%=path%>/admin/login/delete.htm?id="+selects[0].id,
                        function(data){
                            alert(data.result);
                            location.href = "<%=path%>/admin/login/toList.htm";
                        }
                );
            }else{
                return false;
            }
        }
    });
});
var TableInit = function () {
    var oTableInit = new Object();
    //初始化Table
    oTableInit.Init = function () {
       $('#eventsTable').bootstrapTable({
            url : '<%=path%>/admin/login/findByPage.json',
            method: 'post',
            toolbar: '#toolbar',               
            striped: true,                     
            cache: false,                      
            pagination: true,                  
            sortable: false,                    
            sortOrder: "asc",                  
            /*queryParams: prototype.onPageChange, */
            sidePagination: "server",          
            pageNumber:1,                      
            pageSize: 10,                      
            pageList: [10, 20, 50, 100],     
            /* search: true, 
            searchOnEnterKey : false,
            strictSearch: false,
            trimOnSearch : true,*/
            showColumns: true,                 
            showRefresh: true,                 
            minimumCountColumns: 2,            
            clickToSelect: true,  //点击选中
            singleSelect : true,  //单选
            height: 550,          //表格高度              
            uniqueId: "id",       //唯一标识             
            showToggle:false,     //是否显示cardView按钮              
            cardView: false,                   
            detailView: false,
            queryParams: function queryParams(params) {   //设置查询参数 
                var param = {
                        limit : params.limit,
                        offset: params.offset,
                     'codeAbb': $('#codeAbb').val(),
                        'codeCn': $('#codeCn').val(),
                        'codeEn': $('#codeEn').val(),
                        'fromTime': $('#fromTime').val(),
                        'toTime': $('#toTime').val() 
                };   
                return param;                  
              },
            columns: [{
                checkbox: true,
                width:'3%'
            }, {
                field: 'id',
                title: '编号',
                width : '5%'
               
            }, {
                field: 'companyId',
                title: '公司编号',
                width : '5%'
            }, {
                field: 'codeId',
                title: '产品编号',
                width : '5%'
            }, {
                field: 'parentId',
                title: '父编号',
                width : '4%'
               
            }, {
                field: 'isParent',
                title: '是否有子类',
                width : '5%',
                formatter:function(value,row,index){
                    if(value == 1){
                        return '是';
                    }else {
                        return '否';
                    }
                }
            }, {
                field: 'codeAbb',
                title: '简称',
                width : '8%'
            }, {
                field: 'codeCn',
                title: '中文名称' ,
                width : '5%'
            }, {
                field: 'codeEn',
                title: '英文名称',
                width : '5%'
            }, {
                field: 'comments',
                title: '备注',
                align : 'center',
                width : '14%'
            }, {
                field: 'state',
                title: '状态',
                width : '5%'
            }, {
                field: 'isShare',
                title: '是否共享',
                width : '5%',
                formatter:function(value,row,index){
                    if(value == 'Y'){
                        return '是';
                    }else {
                        return '否';
                    }
                }
               
            }, {
                field: 'creator',
                title: '创建者',
                width : '5%'
            }, {
                field: 'createtime',
                title: '创建时间',
                width : '10%'
            }, {
                field: 'modifor',
                title: '修改者',
                width : '5%'
            }, {
                field: 'modifytime',
                title: '修改时间',
                width : '10%'
            },]
           
        });
    };
    return oTableInit;
};
/* $('#eventsTable').bootstrapTable.prototype.onPageChange = function (number, size) {
    var temp = {
             'codeAbb': $('#codeAbb').val(),
             'codeCn': $('#codeCn').val(),
             'codeEn': $('#codeEn').val(),
             'fromTime': $('#fromTime').val(),
             'toTime': $('#toTime').val()
    };
    return temp;
}; */

var ButtonInit = function () {
    var oInit = new Object();
    oInit.Init = function () {
        //初始化页面上面的按钮事件
    };
    return oInit;
};

</script>
<title>显示列表</title>
</head>
<body>
    <div id="searchbar" >
        <form class="bs-example bs-example-form" id="searchForm">
          <div class="input-group">
             <span class="input-group-addon">按简称：</span>
             <input type="text" id="codeAbb"  class="form-control"/>
             <span class="input-group-addon">中文名称：</span>
             <input type="text" id="codeCn"   class="form-control"/>
             <span class="input-group-addon">英文名称：</span>
             <input type="text" id="codeEn"   class="form-control"/>
             <span class="input-group-addon">创建日期:从</span>
             <input type="text" id="fromTime" class="form-control datepicker" />
              <span class="input-group-addon">到</span>
             <input type="text" id="toTime"   class="form-control datepicker"/>
             <span class="input-group-addon"><button type="button" id="searchBtn">查询</button></span>
          </div>
         </form>
    </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_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="eventsTable" >
    </table>
</body>
</html>

分享到：
jquery
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    bootstrapTable使用示例.rar

    BootstrapTable是一款基于Bootstrap框架的前端数据展示插件，它提供了丰富的功能和自定义选项，能够帮助开发者轻松地创建美观、响应式的表格。本示例压缩包包含了一系列关于BootstrapTable的使用示例，包括父子表、...

    实现bootstrap table可设置列宽和可拖动列宽

    $('#table').bootstrapTable({ columns: [/*...*/], data: [/*...*/], // 启用列宽拖动功能 extensions: { columnResize: {} } }); }); ``` 这样，用户就可以通过鼠标拖动列头来调整列宽了。需要注意的是，...

    基于Bootstrap table组件实现多层表头的实例代码

    Bootstrap Table多层表头实现实例代码 Bootstrap Table是一个功能强大的表格组件，它提供了许多有用的功能，包括多层表头的实现。在本文中，我们将分享基于Bootstrap Table组件实现多层表头的实例代码。 多层表头...

    bootstraptable冻结列例子.doc

    $('#table').bootstrapTable({ columns: [ // 定义表格列 { field: 'id', title: 'ID' }, { field: 'name', title: '姓名' }, { field: 'age', title: '年龄' }, // 更多列... ], data: [ // 表格数据 { ...

    bootstrap table 分页栏修改

    在Bootstrap Table中实现类似的效果，我们需要深入理解Bootstrap Table的分页机制，并对源代码进行适当的定制。 1. **理解Bootstrap Table分页机制**： Bootstrap Table的分页功能依赖于内置的`pagination`模块。...

    Bootstrap Table两个table间行数据拖拽

    在“Bootstrap Table两个Table数据之间行数据拖拽”的主题中，我们主要讨论的是如何实现用户可以通过拖放操作在两个Bootstrap表格之间移动行数据，这种功能在数据管理、比较或重新排序场景中非常实用。 首先，我们...

    基于javaweb 的bootstrap table使用案例源码下载

    在JavaWeb开发中，Bootstrap Table是一种非常流行的前端组件，它结合了Bootstrap框架的美观性和功能强大的数据展示能力。本案例提供了使用Bootstrap Table与Ajax进行交互的详细示例，旨在帮助开发者更好地理解和应用...

    bootstrap table editable js

    当页面加载完成后，`bootstrapTable()`方法初始化表格并激活编辑功能。 总的来说，Bootstrap Table Editable JS 提供了一种高效且用户友好的数据管理解决方案，尤其适用于需要在前端进行数据编辑和管理的应用场景。...

    Bootstrap Table 跨页选择

    在“Bootstrap Table 跨页选择”这个主题中，我们主要关注的是如何在实现后台分页的表格中实现用户在不同页面选择行的功能，并能持久保存和恢复这些选择。 在传统的Bootstrap Table中，用户可能只能在当前页面进行...

    bootstraptable-reorder-columns表格拖拽排序列

    "bootstraptable-reorder-columns" 是这个库的一个扩展插件，专门用于实现表格列的拖拽排序功能。用户可以通过简单的拖放操作来调整表格列的顺序，极大地提高了用户在查看和管理大量数据时的灵活性和便利性。 在Web...

    bootstrap table ajax 示例

    Bootstrap Table 是一个流行的前端数据展示框架，它利用了Twitter Bootstrap 的样式和交互设计，使得创建交互式的、响应式的数据表格变得简单。在这个“bootstrap table ajax 示例”中，我们看到一个利用 Maven 构建...

    BootStrapTable实现增删改查

    BootstrapTable是一种基于Bootstrap框架的前端数据展示插件，它提供了丰富的功能，如表格排序、分页、筛选等，使得在网页上创建交互式表格变得简单。在MVC（Model-View-Controller）架构中，结合C#后端，Bootstrap...

    Bootstrap Table 搜索框和查询功能

    知识点bootstrapTable 刷新和查询配置 2.提升js代码性能 1.减少全局变量声明 2.缓存dom节点查找结果 3.局部变量缓存全局变量  /** * @param col bootstrapTable列表生成配置对象 */ var searchValue ={};//查询...

    bootstrapTable实现列宽可拖动

    BootstrapTable 是一个基于 Bootstrap 框架的前端数据表格插件，它提供了丰富的功能，如分页、排序、过滤、自定义列等。在实际应用中，有时我们需要根据数据显示的需求调整列宽，以便更好地查看和理解表格内容。...

    bootstrap table分页例子.zip

    Bootstrap Table 是一个基于Bootstrap框架的开源插件，用于创建功能丰富的、响应式的表格。这个"bootstrap table分页例子.zip"文件包含了一个展示如何在Bootstrap Table中实现分页功能的示例。Bootstrap Table提供了...

    Bootstrap Table Fixed Columns 固定列

    "Fixed Columns"功能是Bootstrap Table的一个扩展，它允许用户在表格中固定左侧或右侧的列，即使在滚动时，这些列也会始终保持可见，提高了数据浏览的便利性。这对于那些需要大量数据展示并且需要快速访问特定列信息...

    bootstrap table-js.rar

    这通常通过调用`$('#table').bootstrapTable({ options })`方法实现，其中`#table`是表格的ID，`options`是一个包含各种配置项的对象。 4. **数据源**：Bootstrap Table支持多种数据源，包括JSON对象数组、服务器端...

    BootStrap Table复选框默认选中功能的实现代码(从数据库获取到对应的状态进行判断是否为选中状态)

    $('#table').bootstrapTable({ url: '../data/kehulist.json', uniqueId: "id", striped: true, // pagination: true, clickToSelect: true, height: 340, columns: [ { field: 'state', checkbox: true, ...

    Bootstrap Table API 中文版（完整翻译文档）

    $('#table').bootstrapTable({ search: true, pagination: false, pageSize: 15, pageList: [5, 10, 15, 20], showColumns: true, showRefresh: false, showToggle: true, locale: "zh-CN", striped: true ...

    完美解决bootstraptable父子表子表渲染问题

    BootstrapTable是一款基于Bootstrap框架的前端数据表格插件，它提供了丰富的功能，如排序、过滤、分页、自定义列等。在使用过程中，有时我们可能会遇到一个特定的需求，即实现父子表的功能，也就是在一个表格中嵌套...

Magicbox
Global site tag (gtag.js) - Google Analytics