jquery+jquery.pagination+php+ajax 无刷新分页
2017-03-16 17:49
489 查看
<!DOCTYPE html> <html ><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>预约列表</title> <link rel="stylesheet" href="./static/pagination.css"> <script type="text/javascript" src="./static/jquery.min.js"></script> <script type="text/javascript" src="./static/jquery.pagination.js"></script> <script type="text/javascript"> $(function(){ var num_entries = 10;//先写10,ajax请求后后更新为 16 测试ajax更新页码用 var initPagination = function() { // 创建分页 $("#Pagination").pagination(num_entries, { num_edge_entries: 1, //边缘页数 num_display_entries: 4, //主体页数 callback: pageselectCallback, items_per_page: 1, //每页显示1项 prev_text: "前一页", next_text: "后一页" }); }; function pageselectCallback(page_index, jq){ page_index++; var html=''; $.ajax({ url: "data.php", type: 'post', dataType: 'json', async : false, data:{page:page_index}, success: function (data, status) { count = data.list.length; html += "<table><th>title</th><th>content</th>"; if(count>0){ for(i=0;i<count;i++){ html += "<tr><td>"+data['list'][i].title+"</td><td>"+data['list'][i].content+"</td></tr>"; } } html += "</table>"; } }); $("#Searchresult").html(html); return false; } initPagination(); }); </script> </head> <body> <h1>预约列表</h1> <div id="Pagination" class="pagination"></div> <div id="Searchresult"> </div> </body></html>
php
<?php $data = array( '1'=>array('list'=>array(array("title"=>'111title',"content"=>'1111content'),array("title"=>'111title',"content"=>'1111content'),array("title"=>'111title',"content"=>'1111content')),'page' => 12), '2'=>array('list'=>array(array("title"=>'111title',"content"=>'1111content'),array("title"=>'111title',"content"=>'1111content'),array("title"=>'111title',"content"=>'1111content')),'page' => 12), '3'=>array('list'=>array(array("title"=>'111title',"content"=>'1111content')),'page' => 16), '4'=>array('list'=>array(array("title"=>'111title',"content"=>'1111content')),'page' => 16), '5'=>array('list'=>array(array("title"=>'111title',"content"=>'1111content')),'page' => 16), '6'=>array('list'=>array(array("title"=>'111title',"content"=>'1111content')),'page' => 16), '7'=>array('list'=>array(array("title"=>'111title',"content"=>'1111content')),'page' => 16), '8'=>array('list'=>array(array("title"=>'111title',"content"=>'1111content')),'page' => 16), '9'=>array('list'=>array(array("title"=>'111title',"content"=>'1111content')),'page' => 16), '10'=>array('list'=>array(array("title"=>'111title',"content"=>'1111content')),'page' => 16), '11'=>array('list'=>array(array("title"=>'111title',"content"=>'1111content')),'page' => 16), '12'=>array('list'=>array(array("title"=>'111title',"content"=>'1111content')),'page' => 16), ); echo json_encode($data[$_POST['page']]); //echo time(); ?>
代码下载
相关文章推荐
- jQuery+Ajax+PHP无刷新分页
- jQuery+Ajax+PHP无刷新分页
- php jQuery . Ajax 实现局部刷新分页
- php+ajax+jquery 实现无刷新分页以及js缓存
- jQuery+Ajax+PHP无刷新分页
- Jquery+php+mysql实现上拉加载更多,后端CI,超详细,有示例(其实就是ajax无刷新分页)
- 无刷新分页 jquery.pagination.js
- Asp.Net无刷新分页( jquery.pagination.js)
- 无刷新分页控件(原创)(jQuery+json+ashx)(Ajax)
- jquery.pagination +JSON 动态无刷新分页
- 采用Jquery无刷新分页插件jquery.pagination.js 实现无刷新分页效果
- jquery的pagination插件实现无刷新的分页
- Asp.net + jQuery + jQuery pager plugin + Sql Server 利用Ajax实现真正的无刷新分页浏览
- 利用Jquery中的pagination插件实现无刷新的分页
- Asp.Net无刷新分页( jquery.pagination.js)
- jquery.pagination +JSON 动态无刷新分页实现代码
- Ajax无刷新分页(Access+JQuery+JSON)
- jquery pagination插件实现无刷新分页代码
- JS+Ajax+Jquery实现页面无刷新分页以及分组 超强的实现第1/2页
- php jquery 实现新闻标签分类与无刷新分页