`

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
评论
发表评论

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

相关推荐

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