Ajax Pagination off the click if li is disabled

Question

I want to off the click when the First Page and Previous li is disabled also when you are on last page the Next and Last should be not clicked. I used off() and unbind() it is working to off the click but when the li is enabled then the click is not working. You can check it here on this link my project is live here http://199.192.21.232/~admin/category.php?cat_id=2 thank you.

HTML Code

<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

<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 CODE

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

Please add what you get in `data.nav_btn_disable` as we don't know about data. and I think this will work in your case...https://stackoverflow.com/questions/12019707/disabled-link-in-bootstrap-pagination — Parth Raval, Nov 10 '20 at 08:55
I also update the php code for data.nav_btn_disable please check now. Thank you — Amir Alam Khan, Nov 10 '20 at 08:59
No Bro, Add dummy data. what you get in `data`... or create one fiddle with dummy data..other wise we can't able to get where you stuck.(I haven't give down vote) — Parth Raval, Nov 10 '20 at 09:00

score 1 · Accepted Answer · answered Nov 10 '20 at 11:24

1

I just fixed it with this code.

$(".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');
            }
        }
    });

answered Nov 10 '20 at 11:24

Amir Alam Khan

47
10

Thank you Parth for your help. – Amir Alam Khan Nov 10 '20 at 11:25
You are welcome, I have removed my answer & upvoted yours. :-) – Parth Raval Nov 10 '20 at 11:47
Thank you can you help me with pagination pages drop down filed? I don't want this drop down field just need to add li for pages. – Amir Alam Khan Nov 10 '20 at 11:54
Okay means you want to bind the data in dropdown instead of li. Am I right? – Parth Raval Nov 10 '20 at 11:59
No i want to bind the data in li instead of dropdown. there is only one dropdown filed you can see on provided link? i want remove it and just use li. – Amir Alam Khan Nov 10 '20 at 12:01
means you want to bind one same pagination in multiple places.Am I right? – Parth Raval Nov 10 '20 at 12:06
No my pagination is like this now First page | Previous | dropdown here | Next | Last page and i want like this First page | Previous | 1 | 2 | 3 | 4 | Next | Last page. – Amir Alam Khan Nov 10 '20 at 12:11
I added the li with active class etc.. but it is not working you can check it on link. – Amir Alam Khan Nov 10 '20 at 13:21
are you there? i am facing some issues on li tags. – Amir Alam Khan Nov 11 '20 at 04:48
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/224429/discussion-between-parth-and-amir-alam-khan). – Parth Raval Nov 11 '20 at 15:24
Sorry for the late reply are you still online? I fixed my all code and it is everything working fine now i just want to check my all ajax code if there is any mistake. – Amir Alam Khan Nov 12 '20 at 07:31

Ajax Pagination off the click if li is disabled

1 Answers1