• jquery+jquery.pagination+php+ajax 无刷新分页


    <!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();
    ?>
    

      

    代码下载

  • 相关阅读:
    2017.1.10学习笔记
    v-model双向绑定
    指令之v-bind
    v-for列表渲染
    事件修饰符
    v-on
    指令v-text v-html
    vue起步
    Swoole HTTPServer
    SwooleTCP
  • 原文地址:https://www.cnblogs.com/nowphp/p/6560792.html
Copyright © 2020-2023  润新知