如果 li 被禁用，则单击 Ajax 分页答案

【问题标题】：Ajax Pagination off the click if li is disabled如果 li 被禁用，则单击 Ajax 分页
【发布时间】：2021-02-22 04:40:45
【问题描述】：

当第一页和上一页被禁用时，我想关闭点击，当您在最后一页时，不应点击下一页和最后一页。我使用了 off() 和 unbind() 它可以关闭点击，但是当 li 启用时，点击不起作用。您可以在此链接上查看我的项目在这里http://199.192.21.232/~admin/category.php?cat_id=2 谢谢。

HTML 代码

<ul class="pagi cf">
  <li><strong id="nav_info"></strong></li>
  <li id="nav_first"><a>&lsaquo;&lsaquo; First Page</a></li>
  <li id="nav_prev"><a>Previous</a></li>
  <select class="btn" id="nav_currentPage"></select>
  <li id="nav_next"><a>Next</a></li>
  <li id="nav_last"><a>Last &rsaquo;&rsaquo;</a></li>
</ul>

Ajax 脚本

<script>
  $(document).ready(function(e) {
    //SHOW LIST WHEN DO STRING SEARCH
    $("#src-btn").click(function() {
      showList('');
    });
    //--- start navigation btn
    $("#nav_first").click(function(e) {
      showList('first');
    });
    $("#nav_prev").click(function(e) {
      showList('prev');
    });
    $("#nav_next").click(function(e) {
      showList('next');
    });
    $("#nav_last").click(function(e) {
      showList('last');
    });
    $("#per-page").change(function(e) {
      showList('');
    });
    $("#nav_currentPage").change(function(e) {
      showList('goto');
    });
    //--- end navigation btn
    //SHOW LIST WHEN CALLED BY OTHER BUTTON [ADD NEW ITEM, THEN RELOAD LIST]
    $("#src-frm").submit(function() {
      showList();
      return false;
    });
    //START SHOWING LIST                
    showList('');
    function showList(navAction) {
      $('body').append('<div class="pgrs"></div><div class="spin"><div class="loader">Loading...</div></div>');
      //$("#nav_info").html('<div class="loader"></div>');
      var searchKeyword = $("#src-txt").val(),
        currentPage = $("#nav_currentPage").val(),
        rowsPerPage = $("#per-page").val();

      $.ajax({
        type: 'POST',
        url: "pagination.php",
        data: {
          cat_id: < ? php echo $_GET['cat_id']; ? > ,
          keyword : searchKeyword,
          currentPage: currentPage,
          rowsPerPage: rowsPerPage,
          navAction: navAction
        },
        // this part is progress bar
        xhr: function() {
          var xhr = new window.XMLHttpRequest();
          xhr.upload.addEventListener("progress", function(evt) {
            if (evt.lengthComputable) {
              var percentComplete = evt.loaded / evt.total;
              percentComplete = parseInt(percentComplete * 100);
              //$('.pgrs').text(percentComplete + '%');
              $('.pgrs').css('width', percentComplete + '%');
            }
          }, false);
          xhr.addEventListener("progress", function(evt) {
            if (evt.lengthComputable) {
              var percentComplete = evt.loaded / evt.total;
              percentComplete = parseInt(percentComplete * 100);
              //$('.pgrs').text(percentComplete + '%');
              $('.pgrs').css('width', percentComplete + '%');
            }
          }, false);
          return xhr;
        },
        success: function(data) {
          //parse json string to javascript json object
          var data = JSON.parse(data);
          //push data to table
          $("#category-products").html(data.list);
          //select or focus the target page
          $("#nav_currentPage").val(data.targetPage);
          //check if action is refresh, then reload the GOTO list
          if (navAction == 'refresh' || navAction == '') {
            //empty the list
            $('#nav_currentPage').empty();
            //append option item with value to select list
            $.each(data.gotoSelectNum, function(key, value) {
              $('#nav_currentPage').append($("<option></option>").attr("value", value).text(value));
            });
          }
          //show list page and record info
          if (data.totalPages == 0) {
            $("#nav_info").html('List Empty');
          } else {
            $("#nav_info").html('Page ' + data.targetPage + ' of ' + data.totalPages);
            $(".pgrs,.spin").remove();
          }
          //disable or enable pagination button
          $.each(data.nav_btn_disable, function(key, jdata) {
            if (jdata == 1) {
              $("#" + key).removeClass('disabled');
            } else {
              $("#" + key).addClass('disabled');
            }
          })
        }
      });
    }
  });
</script>

PHP 代码

<?php

include 'config.php';
$currency_symbol = '$';
$conn = OpenCon();
// SCRIPT IN PHP FILE REQUESTED BY AJAX, SEPARATED FILE
$cat_id = $_POST['cat_id'];
$keyword = $_POST['keyword'];
$currentPage = intval($_POST['currentPage']);
$rowsPerPage = $_POST['rowsPerPage'];
$navAction = $_POST['navAction'];
//Applying some condition to SQL
$sql_condition = 'WHERE';
if($keyword<>''){
    $sql_condition .= ($sql_condition == 'WHERE' ? '' : ' FIND_IN_SET('.$cat_id.', products_cat.id) AND')." (product_title LIKE '%$keyword%')";
}
if($sql_condition == 'WHERE'){
    $sql_condition = 'WHERE FIND_IN_SET('.$cat_id.', products_cat.id)';
}   
//Work with total page
//$query = "SELECT * FROM products $sql_condition ORDER BY product_title ASC";
$query = "SELECT * FROM products_cat JOIN products ON FIND_IN_SET(products_cat.id, products.product_category) $sql_condition ORDER BY products.product_title ASC";
$navRow_qry = mysqli_query($conn,$query);
$totalRow = mysqli_num_rows($navRow_qry);
$totalPages = $totalRow/$rowsPerPage;
if($totalRow%$rowsPerPage>0){$totalPages = intval($totalPages) + 1;}
//Get the target page number    
$targetPage = 1;$nav_btn_disable = array();
if($navAction=='first'){
$targetPage = 1;
}elseif($navAction=='prev'){
$targetPage = $currentPage-1;
}elseif($navAction=='next'){
$targetPage = $currentPage+1;
}elseif($navAction=='last'){
$targetPage = $totalPages;
}elseif($navAction=='goto'){
$targetPage = $currentPage;
}   
//Get goto select list
$gotoSelectNum = array();
for($i=1;$i<=$totalPages;$i++){
$gotoSelectNum[] = $i;
}   
//Check button to be disable or enable
if($totalPages==1 or $totalPages==0){
$nav_btn_disable = array('nav_first'=>0,'nav_prev'=>0,'nav_next'=>0,'nav_last'=>0);
}elseif($targetPage==1){
$nav_btn_disable = array('nav_first'=>0,'nav_prev'=>0,'nav_next'=>1,'nav_last'=>1);
}elseif($targetPage==$totalPages){
$nav_btn_disable = array('nav_first'=>1,'nav_prev'=>1,'nav_next'=>0,'nav_last'=>0);
}else{
$nav_btn_disable = array('nav_first'=>1,'nav_prev'=>1,'nav_next'=>1,'nav_last'=>1);
}   
//Applying data to be shown according to the criteria [targetPage,rowsPerPage]
$startIndex = ($targetPage-1)*$rowsPerPage;
$dataListString = '';$i=$startIndex+1;  
//Querying data from data
//$query = "SELECT * FROM products $sql_condition ORDER BY product_title ASC LIMIT ".$startIndex.",$rowsPerPage";
$query = "SELECT * FROM products_cat JOIN products ON FIND_IN_SET(products_cat.id, products.product_category) $sql_condition ORDER BY products.product_title ASC LIMIT ".$startIndex.",$rowsPerPage";
$data_qry = mysqli_query($conn,$query);
    if (!empty($data_qry) && $data_qry->num_rows > 0)
    {
        $i = 1;
        $dataListString .= '<ul id="products" class="products">';
        while($data_row = mysqli_fetch_assoc($data_qry))
        {
            if($i++ % 5 == 0){$last = ' class="last"';}else{$last = '';}
            $ids = explode(",", $data_row['product_images']);
            $dataListString .= '<li '.$last.'><a href="single.php?product-id='.$data_row['id'].'">';
            $dataListString .= getProductImg($ids[0]);
            $dataListString .= getProductImg($ids[1]);
            $dataListString .= '<div class="ti">'.$data_row['product_title'].'</div>';
            if(empty($data_row['product_sprice'])){
                $dataListString .= '<span class="sp">'.$currency_symbol.$data_row['product_rprice'].'</span>';
            }
            else{
                $dataListString .= '<span class="sp">'.$currency_symbol.$data_row['product_sprice'].'</span>';
                $dataListString .= '<span class="rp">'.$currency_symbol.$data_row['product_rprice'].'</span>';
                $dataListString .= '<span class="pr">'.percent($data_row['product_rprice'],$data_row['product_sprice']).'</span>';
            }
            $dataListString .= '</a></li>';
        }
        $dataListString .= "</ul>";
    }
    else
    {
        $dataListString .='';
    }
//check if no data in database, then display 'No Data' message
if($dataListString == ''){$dataListString = 'No Data Found';}
//store all variable to an array
$data = array('list'=>$dataListString,'targetPage'=>$targetPage,'totalPages'=>$totalPages,'gotoSelectNum'=>$gotoSelectNum,'nav_btn_disable'=>$nav_btn_disable);
//convert array to json object, and return it back to ajax
echo json_encode($data);
CloseCon($conn);

【问题讨论】：

请添加您在data.nav_btn_disable 中获得的内容，因为我们不了解数据。我认为这适用于您的情况...stackoverflow.com/questions/12019707/…
我还更新了 data.nav_btn_disable 的 php 代码，请立即检查。谢谢
不，兄弟，添加虚拟数据。你在data 中得到了什么......或者用虚拟数据创建一个小提琴......否则我们无法找到你卡住的地方。（我没有放弃投票）

标签： javascript jquery ajax

【解决方案1】：

我刚刚用这段代码修复了它。

$(".pagi li").click(function(e){
        if (!$(this).hasClass("disabled"))
        {
            if($(this).is('#nav_first')){
                showList('first');
            }else if($(this).is('#nav_prev')){
                showList('prev');
            }else if($(this).is('#nav_next')){
                showList('next');
            }else if($(this).is('#nav_last')){
                showList('last');
            }
        }
    });

【讨论】：

感谢 Parth 的帮助。
不客气，我已经删除了我的答案并支持了你的答案。 :-)
谢谢你能帮我把分页页面下拉归档吗？我不希望这个下拉字段只需要为页面添加 li。
好的意思是你想绑定下拉列表中的数据而不是li。我说的对吗？
不，我想将数据绑定在 li 而不是下拉列表中。您在提供的链接上只能看到一个下拉列表？我想删除它并使用 li。