bootstrap table 分页例子

页面js:

var $table=$("#table4");
function queryParamsForHandover(params){

var nparams={

"pagesize":5,
"pageno": (params.offset/5)+1
};
return nparams;
}


/**
 * 查询
 */
function searchReverseOutStorage(){
$table.bootstrapTable('destroy');
$table.bootstrapTable({
url:ctx+"/reverseOutStorage/selectPageByQueryParams.do",
sidePagination:"server",
pagination:"true",
pageSize: 5, 
pageList:"[5, 10, 20, 50]",
queryParams:"queryParamsForHandover",
responseHandler:"res"
});
}




/**
 * bootstrap.table分页参数返回
 * @param res
 * @returns {___anonymous275_329}
 */
function res(res) {
return {
"total":res.totalCount,
"rows":res.pageList
};
}




searchReverseOutStorage();



function operateFormatter4(value, row, index) { 
    return [ 
        '<a style="color:#137;cursor:pointer;margin:0 4px;" class="detail">详情</a>'
    ].join(''); 



window.operateEvents = { 
       
        'click .detail': function (e, value, row, index) { 
            window.location.href=ctx+"/basic/merchant/productRateLogListDetail.do?priceStatus="+row.priceStatus+"&logId="+row.id+"&versionNum="+row.versionNum+"&salerId="+row.salerId+"&customerId="+row.customerId+"&customerName="+row.customerName;
        }
    }; 




页面html:


 <div class="tablelist">
            
            <table  id="table4" class="tablesorter"
                       data-toggle="table"
                       data-toolbar="#toolbar"
                       data-show-pagination-switch="false" >
                           <thead>
                                <tr>
                                    <th data-field="outStorageNum" >交接出库单号</th>
                                    <th data-field="customerId" >客户名称</th>
                                    <th data-field="operateTime" >交接出库时间</th> 
                                    <th data-field="operatePerson">交接人</th> 
                                    <th data-formatter="operateFormatter4" data-events="operateEvents">操作</th>
                                </tr>
                           </thead>    
                    </table> 
                    
        </div>



后台java-返回json:

public static Map tfMap(Map<String,Object> map,DatabasePaginatedList list){
map.put("pageList", list.getPageList());
map.put("pageIndex", list.getPageIndex());
map.put("pageSize", list.getPageSize());
map.put("totalCount", list.getTotalCount());
map.put("pageCount", list.getPageCount());
return map;
}

猜你喜欢

转载自blog.csdn.net/xiaogg3678/article/details/62425810