ajax分页实现（php）

ajax分页实现（php）

使用jquery.pagination.js插件

　　引入js文件、css文件

<link rel="stylesheet" href="/css/pagination.css"/>
<link rel="stylesheet" href="/css/project-search.css"/>

　　jq文件必须在pagination前加载，否则会出错

 <script type="text/javascript" src="/lib/jquery.min.js"></script>
 <script type="text/javascript" src="/lib/jquery.pagination.js"></script>

　　前台添加分页div

 <div id="Pagination"></div>

　js代码：（由于在框架中使用所以其他参数就不去了……）

    <script type="text/javascript">
         $(function(){
             //每页条数
             var pageSize = 15;

             var currentPageNum = 0;

             var url_1 = '/search/projectcount';
             var url_2 = '/search/projectlist';
             var type = 'get';

             var totalCount = 0;
             var totalPage = 0;

             var initQueryString_1 =
             {
                 name: '',
                 industryCode: '',
                 typeCode: '',
                 wasBindUniTechnology: '-9',
                 investStageCode: '',
                 provinceCode: ''
             }

             var initQueryString_2 =
             {
                 name: '',
                 industryCode: '',
                 typeCode: '',
                 wasBindUniTechnology: '-9',
                 investStageCode: '',
                 provinceCode: '',
                 pageIndex: '0',
                 pageSize: pageSize
             }

             //获取总页数，产生分页
             $.ajax({
                 url:url_1,
                 type:type,
                 data:initQueryString_1,
                 success : function(msg){
                     totalCount = msg;

                     totalPage = Math.ceil((msg!='0'?msg:1)/pageSize);
                     $("#Pagination").pagination(totalPage, {
                         callback: pageSearch
                     });
                     $('.project-search-pages .allPage').html(totalPage);

                     //如果数据总条数小于pageSize，则不显示分页
                     if (totalCount < pageSize){
                         $('.project-search-pages').addClass('hidden');
                     }
                     if (totalCount > pageSize){
                             $('.project-search-pages').removeClass('hidden');
                         }
                 }
             })

             //获取数据，第一页，不超过pageSize条
             $.ajax({
                 url:url_2,
                 type:type,
                 data:initQueryString_2,
                 beforeSend :function(){
                     $(".project-search-list").html('<div style="text-align:center;margin-top:20px"><img src="/img/loading.gif" style="width:30px;height:30px"></div>');
                 },
                 success : function(msg){
                     $(".project-search-list").html(msg);
                 }
             })

             //给搜索按钮添加点击事件
             $('#searchBtn').click(function() {
                 btnSearch();
             });

             //给所有筛选项添加点击事件
             $('.map-item-box li a').click(function(){
                 classifySearch();
             });

             //给跳转到指定页添加事件
             $('.my-page-btn').click(function(){
                 var goPage = $('.page-go input').val() - 1;
                 var allPage = $(".allPage").text();

                 if(goPage > -1 && goPage < allPage){
                     //产生分页
                          $("#Pagination").pagination(allPage,{
                           callback: pageSearch,
                           current_page: goPage
                          });
                     //更新数据
                          $(".project-search-list").html(goToPage(goPage));
                 } else {
                         //清空用户跳转页数
                       $(".page-go input").val("");
                         return false;
                 }
                 //清空用户跳转页数
                 $(".page-go input").val("");

             });

             function btnSearch() {

                 $('.map-item-box li a').removeClass('selected');
                 $('.map-item-box li.map-item-all-btn a').addClass('selected');

                    var paras =
                    {
                        name:$('#name').val(),
                        industryCode:'',
                        typeCode:'',
                        wasBindUniTechnology:'',
                        investStageCode:'',
                        provinceCode:''
                    };     

                  $.ajax({
                    url: '/search/projectcount',
                    type: 'get',
                    data: paras,
                    success: function(msg) {
                        totalCount = msg;
                         totalPage = Math.ceil((msg!='0'?msg:1)/pageSize);
                         $("#Pagination").pagination(totalPage, {
                             callback: pageSearch
                         });
                         $('.project-search-pages .allPage').html(totalPage);

                         //如果数据总条数小于pageSize，则不显示分页
                          if (totalCount < pageSize){
                              $('.project-search-pages').addClass('hidden');
                          }
                          if (totalCount > pageSize){
                                $('.project-search-pages').removeClass('hidden');
                            }
                    }
                  })

                  paras.pageIndex = 0;
                  paras.pageSize = pageSize;

                  $.ajax({
                     url:'/search/projectlist',
                     type:'get',
                     data:paras,
                     beforeSend :function(){
                         $(".project-search-list").html('<div style="text-align:center;margin-top:20px"><img src="/img/loading.gif" style="width:30px;height:30px"></div>');
                     },
                     success : function(msg){
                         $(".project-search-list").html(msg);
                     }
                  })

             }

             function classifySearch() {
                     $('#name').val('');

                      var paras =
                      {
                            name:'',
                            industryCode:$("#industryCode .selected").attr('data-code'),
                            typeCode:$("#typeCode .selected").attr('data-code'),
                            wasBindUniTechnology:$("#wasBindUniTechnology .selected").attr('data-code'),
                            investStageCode:$("#investStageCode .selected").attr('data-code'),
                            provinceCode:$("#provinceCode .selected").attr('data-code'),
                      };

              $.ajax({
                url: '/search/projectcount',
                type: 'get',
                data: paras,
                success: function(msg) {
                     totalCount = msg;
                     totalPage = Math.ceil((msg!='0'?msg:1)/pageSize);
                     $("#Pagination").pagination(totalPage, {
                         callback: pageSearch
                     });
                     $('.project-search-pages .allPage').html(totalPage);

                     //如果数据总条数小于pageSize，则不显示分页
                      if (totalCount < pageSize){
                          $('.project-search-pages').addClass('hidden');
                      }
                      if (totalCount > pageSize){
                             $('.project-search-pages').removeClass('hidden');
                         }
                }
              })

              paras.pageIndex = 0;
              paras.pageSize = pageSize;

              $.ajax({
                 url:'/search/projectlist',
                 type:'get',
                 data:paras,
                 beforeSend :function(){
                     $(".project-search-list").html('<div style="text-align:center;margin-top:20px"><img src="/img/loading.gif" style="width:30px;height:30px"></div>');
                 },
                 success : function(msg){
                     $(".project-search-list").html(msg);
                 }
              })

            }

             function pageSearch(page_index, jq) {
                 var paras = null;
                 var search_word = $('#name').val();

                 if (search_word == '')
                        paras =
                        {
                         name:'',
                           industryCode:$("#industryCode .selected").attr('data-code'),
                           typeCode:$("#typeCode .selected").attr('data-code'),
                           wasBindUniTechnology:$("#wasBindUniTechnology .selected").attr('data-code'),
                           investStageCode:$("#investStageCode .selected").attr('data-code'),
                           provinceCode:$("#provinceCode .selected").attr('data-code')
                        };

                 if (search_word != '')
                        paras =
                        {
                            name:$('#name').val(),
                            industryCode:'',
                            typeCode:'',
                            wasBindUniTechnology:'',
                            investStageCode:'',
                            provinceCode:''
                        };

                  paras.pageIndex = page_index;
                  paras.pageSize = pageSize;

                  //alert(paras.pageIndex)

                  $.ajax({
                     url:'/search/projectlist',
                     type:'get',
                     data:paras,
                     beforeSend :function(){
                         $(".project-search-list").html('<div style="text-align:center;margin-top:20px"><img src="/img/loading.gif" style="width:30px;height:30px"></div>');
                     },
                     success : function(msg){
                         $(".project-search-list").html(msg);
                     }
                  })

                 }

             function goToPage(page_index) {
                 var paras = null;
                 var search_word = $('#name').val();

                 if (search_word == '')
                        paras =
                        {
                         name:'',
                           industryCode:$("#industryCode .selected").attr('data-code'),
                           typeCode:$("#typeCode .selected").attr('data-code'),
                           wasBindUniTechnology:$("#wasBindUniTechnology .selected").attr('data-code'),
                           investStageCode:$("#investStageCode .selected").attr('data-code'),
                           provinceCode:$("#provinceCode .selected").attr('data-code')
                        };

                 if (search_word != '')
                        paras =
                        {
                            name:$('#name').val(),
                            industryCode:'',
                            typeCode:'',
                            wasBindUniTechnology:'',
                            investStageCode:'',
                            provinceCode:''
                        };

                  paras.pageIndex = page_index;
                  paras.pageSize = pageSize;

                  $.ajax({
                     url:'/search/projectlist',
                     type:'get',
                     data:paras,
                     beforeSend :function(){
                         $(".project-search-list").html('<div style="text-align:center;margin-top:20px"><img src="/img/loading.gif" style="width:30px;height:30px"></div>');
                     },
                     success : function(msg){
                         $(".project-search-list").html(msg);
                         document.body.scrollTop=0;
                     }
                  })

                 }

         })

     </script>

后台php 实现，主要是提供数据由前台传递的pageindex ,pagesize 来查询数据并返回

 　　　　　　　　　　//搜索页
                  $con = trim($_GET['title']);
                  $pageIndex = isset($_GET['pageIndex']) ? $_GET['pageIndex']:'';
                  $pageSize = isset($_GET['pageSize']) ? $_GET['pageSize']:'';
                  $pageIndex = $pageIndex*$pageSize;//偏移量
                   $map['isshow'] = 2;
                   $ip = get_client_ip();                                     $map['title'] = array('like', "%$con%");
                 // 多表联查
                 $proinfo = M("project")->alias('p')
                 ->join("user as u on p.uid = u.id ",'left')
                 ->join("project_type as t on p.type = t.id ",'left')
                 ->where($map)
                 ->field("p.id,p.siteid,title")
                 ->order('addtime desc')
                 ->limit($pageIndex,$pageSize)
                 ->select();
                                 if(empty($proinfo)){
                     $error = '暂时没有相关信息！';
                     $this->ajaxReturn(array('status'=>0,'msg'=>$error));
                 }else{                                         $this->ajaxReturn(array('status'=>1,'dataList'=>$proinfo));
                 }

实现起来不是很复杂，理一下思路就好了。

参考网址：http://cy.ncss.org.cn/search/projects 这个网站也是通过ajax请求数据分页的。