Question

当我点击分页链接时，所有工作都正常，但唯一的问题是div id="ajaxList"内部再次显示页面的所有内容

All page content displayed within the id="ajaxList" after clicking the pagination link

Jquery的

$(".page-link").click(function (e) {
   e.preventDefault();

   var url = $(this).attr("data-href");

   $( "body #ajaxList" ).load( url + "#ajaxList" );

})

控制台警报：

[Deprecation]主线程上的同步XMLHttpRequest是由于其对最终用户的不利影响而被弃用经验。如需更多帮助，请查看https://xhr.spec.whatwg.org/。

我尝试了多种方式来通知父母序列，但它不起作用，只有直接显示在'body'而没有指定某些id或class

$( "#ajaxList" )

$( "body #ajaxList" )

$( "body .col #ajaxList" )

$( "html body .col #ajaxList" )

我正在使用jquery-3.2.1

class.crud.php

public function paging($query,$records_per_page)
    {
        $starting_position=0;
        if(isset($_GET["page_no"]))
        {
            $starting_position=($_GET["page_no"]-1)*$records_per_page;
        }
        $query2=$query." limit $starting_position,$records_per_page";
        return $query2;
    }

    public function paginglink($query,$records_per_page)
    {
        $self = $_SERVER['PHP_SELF'];

        $stmt = $this->db->prepare($query);
        $stmt->execute();

        $total_no_of_records = $stmt->rowCount();

        if($total_no_of_records > 0)
        {
            ?><ul class="pagination"><?php
            $total_no_of_pages=ceil($total_no_of_records/$records_per_page);

            $current_page=1;

            if(isset($_GET["page_no"]))
            {
                $current_page=$_GET["page_no"];
            }
            if($current_page!=1)
            {
                $previous =$current_page-1;
                echo "<li class='page-item'><a href='#' class='page-link' data-href='".$self."?page_no=1'>First</a></li>";
                echo "<li class='page-item'><a  href='#' class='page-link' data-href='".$self."?page_no=".$previous."'>Previous</a></li>";
            }
            for($i=1;$i<=$total_no_of_pages;$i++)
            {
                if($i==$current_page)
                {
                    echo "<li class='page-item'><a href='#' class='page-link' data-href='".$self."?page_no=".$i."' style='color:red;'>".$i."</a></li>";
                }
                else
                {
                    echo "<li class='page-item'><a href='#' class='page-link' data-href='".$self."?page_no=".$i."'>".$i."</a></li>";
                }
            }
            if($current_page!=$total_no_of_pages)
            {
                $next=$current_page+1;
                echo "<li class='page-item'><a href='#' class='page-link' data-href='".$self."?page_no=".$next."'>Next</a></li>";
                echo "<li class='page-item'><a href='#' class='page-link' data-href='".$self."?page_no=".$total_no_of_pages."'>Last</a></li>";
            }
            ?></ul><?php
        }
    }

的index.php

<table class="table table-hover" id="ajaxList">
              <thead>
                <tr>
                  <th >#</th>
                  <th style="display:none">id</th>
                  <th>Name</th>
                  <th>Email</th>
                  <th>Tel</th>
                  <th>City</th>
                  <th>Contry</th>

                </tr>
              </thead>
              <tbody >

                 <?php
                    $query = "SELECT * FROM crud ORDER BY id DESC";       
                    $records_per_page=7;
                    $newquery = $crud->paging($query,$records_per_page);
                    $crud->dataview($newquery);
                 ?>
                <tr>
                    <td colspan="7" align="center">
                        <nav aria-label="Page navigation example">
                        <?php $crud->paginglink($query,$records_per_page); ?>
                        </nav>
                    </td>
                </tr>
              </tbody>  
        </table>

Answer 1

目标页面URI之后必须有一个空格，而不是：

url + "#ajaxList"

使用它：

url + " #ajaxList"

如果字符串中包含一个或多个空格字符，则假设第一个空格后面的字符串部分是a jQuery选择器，用于确定要加载的内容。

在docs中找到。

此外，删除.page_link锚点后，您需要再次绑定点击事件。为了避免这种情况，只需以这种方式绑定到body：

$("body").on("click", ".page-link", function() { ... });

正确显示标签内部 - Jquery

1 个答案: