https://github.com/wenzhixin/bootstrap-table

<link rel="stylesheet" href="../bower_components/bootstrap/dist/css/bootstrap.min.css"/><link rel="stylesheet" href="../bower_components/bootstrap-table-develop/dist/bootstrap-table.min.css"/> <script type="text/javascript" src="../bower_components/jquery/dist/jquery.min.js"></script><script type="text/javascript" src="../bower_components/bootstrap/dist/js/bootstrap.min.js"></script><script type="text/javascript" src="../bower_components/bootstrap-table-develop/dist/bootstrap-table.js"></script><script type="text/javascript" src="../bower_components/bootstrap-table-develop/dist/locale/bootstrap-table-zh-CN.js"></script>

<table data-toggle="table" data-url="data.json">            <thead>                ...                </thead></table>

<table id="table" class="mychar1-table"></table>$(‘#table‘).bootstrapTable({          url: ‘data.json‘  }); 

var $table = $(‘#mychart1‘);$table.bootstrapTable({url: reqprojectname_w+‘list/spectrumlist‘, dataType: "json",toolbar: ‘#toolbar‘,                //工具按钮用哪个容器striped: true,                      //是否显示行间隔色singleSelect: false,pagination: true, //分页pageNumber:1,                       //初始化加载第一页，默认第一页pageSize: 10,                       //每页的记录行数（*）pageList: [10, 25, 50, 100],        //可供选择的每页的行数（*）search: false, //显示搜索框sidePagination: "server", //服务端处理分页      columns: [{          field: ‘id‘,          title: ‘序号‘      }, {          field: ‘liushuiid‘,          title: ‘交易编号‘      }, {          field: ‘orderid‘,          title: ‘订单号‘      }, {          field: ‘receivetime‘,          title: ‘交易时间‘      }, {          field: ‘price‘,          title: ‘金额‘      }, {          field: ‘coin_credit‘,          title: ‘投入硬币‘      },  {          field: ‘bill_credit‘,          title: ‘投入纸币‘      },  {          field: ‘changes‘,          title: ‘找零‘      }, {          field: ‘tradetype‘,          title: ‘交易类型‘      },{          field: ‘goodmachineid‘,          title: ‘货机号‘      },{          field: ‘inneridname‘,          title: ‘货道号‘      },{          field: ‘goodsName‘,          title: ‘商品名称‘      }, {          field: ‘changestatus‘,          title: ‘支付‘      },{          field: ‘sendstatus‘,          title: ‘出货‘      },              {                  title: ‘操作‘,                  field: ‘id‘,                  align: ‘center‘,                  formatter:function(value,row,index){                         var e = ‘<a href="http://www.mamicode.com/#" mce_href="http://www.mamicode.com/#" onclick="edit(\‘‘+ row.id + ‘\‘)">编辑</a> ‘;                         var d = ‘<a href="http://www.mamicode.com/#" mce_href="http://www.mamicode.com/#" onclick="del(\‘‘+ row.id +‘\‘)">删除</a> ‘;                      return e+d;                  }               }          ]  });

$(function () {         //1.初始化Table        var oTable = new TableInit();        oTable.Init();         //2.初始化Button的点击事件        /* var oButtonInit = new ButtonInit();        oButtonInit.Init(); */     });      var TableInit = function () {        var oTableInit = new Object();        //初始化Table        oTableInit.Init = function () {            $(‘#tradeList‘).bootstrapTable({                url: ‘/VenderManager/TradeList‘,         //请求后台的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: 50,                       //每页的记录行数（*）                pageList: [10, 25, 50, 100],        //可供选择的每页的行数（*）                strictSearch: true,                clickToSelect: true,                //是否启用点击选中行                height: 460,                        //行高，如果没有设置height属性，表格自动根据记录条数觉得表格高度                uniqueId: "id",                     //每一行的唯一标识，一般为主键列                cardView: false,                    //是否显示详细视图                detailView: false,                   //是否显示父子表                columns: [{                    field: ‘id‘,                    title: ‘序号‘                }, {                    field: ‘liushuiid‘,                    title: ‘交易编号‘                }, {                    field: ‘orderid‘,                    title: ‘订单号‘                }, {                    field: ‘receivetime‘,                    title: ‘交易时间‘                }, {                    field: ‘price‘,                    title: ‘金额‘                }, {                    field: ‘coin_credit‘,                    title: ‘投入硬币‘                },  {                    field: ‘bill_credit‘,                    title: ‘投入纸币‘                },  {                    field: ‘changes‘,                    title: ‘找零‘                }, {                    field: ‘tradetype‘,                    title: ‘交易类型‘                },{                    field: ‘goodmachineid‘,                    title: ‘货机号‘                },{                    field: ‘inneridname‘,                    title: ‘货道号‘                },{                    field: ‘goodsName‘,                    title: ‘商品名称‘                }, {                    field: ‘changestatus‘,                    title: ‘支付‘                },{                    field: ‘sendstatus‘,                    title: ‘出货‘                },]            });        };         //得到查询的参数      oTableInit.queryParams = function (params) {            var temp = {   //这里的键的名字和控制器的变量名必须一直，这边改动，控制器也需要改成一样的                limit: params.limit,   //页面大小                offset: params.offset,  //页码                sdate: $("#stratTime").val(),                edate: $("#endTime").val(),                sellerid: $("#sellerid").val(),                orderid: $("#orderid").val(),                CardNumber: $("#CardNumber").val(),                maxrows: params.limit,                pageindex:params.pageNumber,                portid: $("#portid").val(),                CardNumber: $("#CardNumber").val(),                tradetype:$(‘input:radio[name="tradetype"]:checked‘).val(),                success:$(‘input:radio[name="success"]:checked‘).val(),            };            return temp;        };        return oTableInit;    };

oTableInit.queryParams = function (params) {            var temp = {   //这里的键的名字和控制器的变量名必须一直，这边改动，控制器也需要改成一样的                limit: params.limit,   //第几条记录                offset: params.offset,  //显示一页多少记录                sdate: $("#stratTime").val(),             };            return temp;        };

JSONArray jsonData=http://www.mamicode.com/new JSONArray();        JSONObject jo=null;        for (int i=0,len=10;i<len;i++){            jo=new JSONObject();            jo.put("id",  i+(j++));            jo.put("liushuiid", i+1);            jo.put("price", 100);            jo.put("mobilephone",10);            jo.put("receivetime", 10);            jo.put("tradetype",  10);            jo.put("changestatus", "成功");            jo.put("sendstatus", "失败");            jo.put("bill_credit", 10);            jo.put("goodroadid", 10);            jo.put("SmsContent", 10);            jo.put("orderid",  10);            jo.put("goodsName",  10);            jo.put("inneridname", 10);            jo.put("xmlstr", 10);            jsonData.add(jo);        }        int TotalCount=97;        JSONObject jsonObject=new JSONObject();        jsonObject.put("rows", jsonData);//JSONArray        jsonObject.put("total",TotalCount);//总记录数        

int pageindex=0;int offset = ToolBox.filterInt(json1.getString("offset"));int limit = ToolBox.filterInt(json1.getString("limit"));   if(offset !=0){    pageindex = offset/limit;}    pageindex+= 1;//第几页<br>...