Pagination not working?? - jQuery or Javascript

Question

I just create dynamic table with Pagination but the pagination is not working with that table..

Im using bootstrap table with jquery.

I want to allow 5 rows only display, remaining rows are paginate.

Here is my fiddle

How to paginate when dynamically add rows.

Here is a example code.

$(document).ready(function() {
  $("#add_Row").on("click", function() {
    var counter = 0;
    var idVal = $('#tab_logic tr:last').find('td:first').html();
    var matches = idVal.match(/\d+/g);
    if (matches != null) {
      counter = Number(matches) + counter + 1;
    }
    // alert(counter);
    var newRow = $("");
    var cols = "";
    cols += '';
    cols += '';
    cols += ''
    cols += '';
    cols += '';
    cols += '';

    cols += '';

    newRow.append(cols);

    $("table.order-list").append(newRow);
    setValCashVal('accountName'.concat(counter));
    bindScript();
    counter++;
  });

});

// pagination

$(function() {
  $('#tab_logic').DataTable({
    'paging': true,
    'lengthChange': false,
    'searching': true,
    'ordering': true,
    'info': false,
    'autoWidth': false,
    'pageLength': 5
  })
});

What im doing wrong?

How to set paginate in dynamically add rows.

Thank you

Aishwarya · Accepted Answer

There are some mistake in your code snippet : 1.In table th tags are less than td , which you are appending 2.Calling Datatable before Jquery define

If you want to set paginate in dynamically add rows, then you have to destroy it and reinitialise it. I remove some hidden properties just to check,you can hide them adding class "columnDefs": [{ "class": "hide", "targets": 3 } ] OR "columnDefs": [{"targets": [ 2 ],"visible": false}] Hope this will help you

$(document).ready(function() {
  $("#add_Row").on("click", function() {
  
    var counter = 0,setValCashVal =0;
    var idVal = $('#tab_logic tr:last').find('td:first').html();
    var matches = idVal.match(/\d+/g);
    if (matches != null) {
      counter = Number(matches) + counter + 1;
    }
    // alert(counter);
    if ($.fn.DataTable.isDataTable('#tab_logic')) {
 $('#tab_logic').DataTable().destroy()}
    var newRow = $("");
    var cols = "";
    cols += '';
    cols += ' ';
    
    
    cols += '';
    cols += ''
    cols += '';  
    cols += '';
    cols += '';

    cols += '';

    newRow.append(cols);

    $("table.order-list").append(newRow);
 //   setValCashVal('accountName'.concat(counter));
    //bindScript();
   $('#tab_logic').DataTable({
    'paging': true,
    'lengthChange': false,
    'searching': true,
    'ordering': true,
    'info': false,
    'autoWidth': false,
    'pageLength': 5
  })
    counter++;
  
  
   });
  
});




  
    
    
    
    
       
    
    
  

  
  
  
    

      
        
          
            
            
              Account Code
            
            
              A/c Name*
            
            
              Narration*
            
            
              Debit*
            
            
              Credit
            
            
              Action

Pagination not working?? - jQuery or Javascript

Answers (1)

Related Questions