利用bootstrap进行分页

来源：互联网发布：动易cms漏洞编辑：程序博客网时间：2024/04/25 17:41
<!doctype html><html><head><meta charset="utf-8"><title>数据分页</title></head><body><!--数据显示--><table class="table table-condensed" id="data_list" ></table><!--分页显示的容器--><div id="cont"></div><script src="http://code.jquery.com/jquery-1.9.1.min.js"></script><script src="bootstrap/dist/js/bootstrap.min.js"></script><script src="laypage/laypage.js"></script><link rel="stylesheet" type="text/css" href="bootstrap/dist/css/bootstrap.min.css" /><link rel="stylesheet" type="text/css" href="bootstrap/dist/css/bootstrap-theme.min.css" /><script>var pagesize = 20;//每页的条数var pages = 0;var groups = 0;ajaxPost(1,pagesize);function ajaxPost (page,pagesize){$.ajax({url:'test.php',type:'POST', data:{page:page,pagesize:pagesize},dataType:'json',success:function(data){    //进行数据处理if(data.code == 0){    var str = '<tr><th>测试</th><th>测试</th></tr>';    var totalPage = Math.ceil(data.data.totalnum / pagesize);if(totalPage < 5){groups = totalPage;}else{    groups = 5;}for( var i = 0; i < data.data.items.length; i++){str += "<tr><td>"+data.data.items[i]['uid']+"</td><td>" +data.data.items[i]['uid']+"</td></tr>";}$("#data_list").html(str);    //调用分页laypage({cont: 'cont',pages: totalPage,skip: true, //是否开启跳页skin: '#molv',groups: groups, //连续显示分页数curr: page, jump: function(obj,first){if(!first){ajaxPost(obj.curr,pagesize);}}})}},error:function(){  },})}</script></body></html>
0 0