bootstraptable简单实用并有分页

//html

<table id="demo-table"></table>

//js

<script type="text/javascript">
$(function () {
    initTable();
    
});
function initTable(){
    var url = "${base}/back/userManage/listUsers.do";//访问的id
    $('#demo-table').bootstrapTable({
        method:'post',
        dataType:'json',
        cache: false,
        striped: true,                              //是否显示行间隔色
        sidePagination: "server",           //分页方式：client客户端分页，server服务端分页（*）
        url:url,
        showColumns:true,
        pagination:true,
        queryParams : queryParams,
        pageNumber:1,                       //初始化加载第一页，默认第一页
               pageSize: 10,                       //每页的记录行数（*）
              pageList: [10,15],        //可供选择的每页的行数（*）
              uniqueId: "id",                     //每一行的唯一标识，一般为主键列
        columns: [
        {
            field : 'id',//json数据的key
            title : '用户ID',//自定义显示标题
            align : 'center',
            valign : 'middle',
            sortable : true
        }, {
            field : 'username',
            title : '用户姓名',
            align : 'center',
            valign : 'middle',
            sortable : true
        }, {
            field : 'usertelephone',
            title : '用户电话',
            align : 'center',
            valign : 'middle'
        }, {
            field : 'status',
            title : '用户状态',
            align : 'center',
            valign : 'middle',
            formatter: userStatusFormatter,
            sortable : true
        }, {
            field : 'userbalance',
            title : '用户余额',
            align : 'center',
            valign : 'middle'
        }, {
            field : 'lastloginip',
            title : '最后登录IP',
            align : 'center',
            valign : 'middle'
        }, {
            field : '',
            title : '操作',
            align : 'center',
            valign : 'middle',
            events: operateEvents,
            formatter: operateFormatter
        }]
    });
}
function operateFormatter(value, row, index) {//这个是添加按钮事件
    return [  
        '<a  >审核</a>',  
        '<a  >编辑</a>
    ].join('');  
}
var operateEvents = {  //这个是按钮事件
        click .xiang': function(e, value, row, index) {  

         
        } ,
        'click .xiang2': function(e, value, row, index) {  
 
        } , 
        'click .shield': function(e, value, row, index) {  
            alert();
        }  
 };  


function queryParams(params) {//这个是传入后台的数据参数
    var param = {
        startDate : $("#startDate").val(),
        endDate : $("#endDate").val(),
        pageindex : this.pageNumber,
        pageSize : this.pageSize
    };
    return param;
} 

//这个可以选择使用
// 用于server 分页，表格数据量太大的话 不想一次查询所有数据，可以使用server分页查询，数据量小的话可以直接把sidePagination: "server"  改为 sidePagination: "client" ，同时去掉responseHandler: responseHandler就可以了，
function responseHandler(res) { 
    if (res) {
        return {
            "rows" : res.result,
            "total" : res.totalCount
        };
    } else {
        return {
            "rows" : [],
            "total" : 0
        };
    }
}