Continue counting serial number affer page on pagination

user_12989704 0
Viewed 579

I am displaying data results from database with php, ajax and jquery. I have used codeigniter 4 pager library for pagination. But when I click the next page of pagination the serial number reset and start again from 1-10, all I want is when i click the next page to continue counting a serial number from 11-20, 21-30 etc... Help please. Thank you.

//html table

   <table>
          <thead>
                 <tr>
                     <th>No.</th>
                     <th>MyColumn</th>
                 </tr>
          </thead>
          <tbody class="result"></tbody>
   </table>

//jquery show();

  function show(){
        let ajax = $.ajax({
             url     : '/Controller/getAll',
             method  : 'post',
             dataType: 'json',
             cache   : false
      });
      ajax.done(function(data){
          let serialNumber = 1;

          $.each(data.result, function(k, v){
                html += `<tr>
                             <td>${serialNumber}</td>
                             <td>${v.myColums}</td>
                         </tr>`;
                serialNumber++;
          });
      });

      $('.result').html(html);
  }

// php controller

    public function getAll()
    {
        $result = $this->model->getData()->asObject()->paginate('10');
        $pager = $this->model->pager;
        
        foreach($result as $row){
            $output[] = [
                 'id'          =>  $row->id,
                 'myColumn'    =>  $row->myColumn,
            ];
        }

        $jsonArray = [
            'result'  => $output, 
            'pager'   => $pager->links(),
        ];
        return $this->response->setJSON($jsonArray);
    }
codeigniter-4 jquery ajax javascript
3 Answers

You are initializing serialNumber when you receive a ajax response. Do it on page load.

 function show(){
    let ajax = $.ajax({
         url     : '/Controller/method',
         method  : 'post',
         dataType: 'json',
         cache   : false
  });
  
  ajax.done(function(data){
      let serialNumber = 1; // move this to page load
      $.each(data.result, function(k, v){
            html += `<tr>
                         <td>${serialNumber}</td>
                         <td>${v.myColums}</td>
                     </tr>`;
            serialNumber++;
      });
  });

  $('.result').html(html);
}
user_28928290

Declare a variable outside of the function

let serialNumber = 1;

function show(){
    let ajax = $.ajax({
        url     : '/Controller/getAll',
        method  : 'post',
        dataType: 'json',
        cache   : false
    });
    
    ajax.done(function(data){
        $.each(data.result, function(k, v){
            html += `<tr>
                         <td>${serialNumber}</td>
                         <td>${v.myColums}</td>
                     </tr>`;
            serialNumber++;
          });
    });
}

Another option is to return the page number from PHP and calculate the start point of the serial

user_35730750

You can try it. This is a perfect solution, try it: $page = ($this->uri->segment(3)) ? $this->uri->segment(3) : 1; $data["slno_start"] = (($page-1) * $config["per_page"]) + 1;

user_94410870
Related