How to send ajax request in Datatables in Codeigniter

问题

I Have used this ignited_datatables https://github.com/IgnitedDatatables/Ignited-Datatables in my CodeIgniter project. It successfully returns data from the database. But the main problem is that when I add a new record the newly inserted data is not shown in the table automatically and when I refresh the page then the newly inserted data is then shown in the table. so I want to show that data automatically through ajax and I have not to refresh the page.

My View

<div class="box-body table-responsive">
    <table id="Slider_table" class="table table-bordered table-hover">
       <thead>
         <tr>
           <th>ID</th>
           <th>Title</th>
           <th>item_Price</th>
           <th>Description</th>
           <th>Status</th>
           <th>Action</th>
         </tr>
       </thead>
       <tbody>
       </tbody>
    </table>
</div><!-- /.box-body -->

This Script is Inside the View

$(document).ready(function() {
    $("#Slider_table").dataTable( {
        "bProcessing": true,
        "bServerSide": true,
        "sAjaxDataProp": "data",
        "fnServerData": function(sSource, aoData, fnCallback){
            $.ajax({
                "dataType": "json",
                "type"    : "POST",
                "url"     : "'.base_url().'Home/items_list/list",
                "data"    : aoData,
                "success" : function(res){

                 fnCallback(res);
                }
            });
        }
    });
  });

回答1:

I think you need to use draw() method after success in order to have the table's display updated.

    table.row.add( {
            //you dynamic data
            "name":       "Tiger Nixon",
            "position":   "System Architect",
            "salary":     "$3,120",
            "start_date": "2011/04/25",
            "office":     "Edinburgh",
            "extn":       "5421"
        } ).draw();

as per documentation. please refer draw()

回答2:

You can use ajax.reload() method

     var i=1;
     
     function datatable()
     {  
    $("#myTable1").dataTable().fnDestroy();
  
         $('#myTable1').DataTable({
             "ordering": true,
             "searching": true,
             "bPaginate": true,
   ajax: 'myajaxURL.php', 
   columns : [
     { "render": function ( data, type, full, meta ) { return i++;   }
       },
     {"data": "col1"},
     {"data": "col2"},
     {"data": "col3"},
    ]
});
     }
     
function insertData { 
      //after each insertion do this
     var i=1;
     $('#myTable1').DataTable().ajax.reload(); 
      //after each insertion do this
}
     $(document).ready(function () {
    
     datatable();
});

回答3:

i always did this in every view of my page

 var table;
 table = $('#Slider_table').dataTable({
    "bPaginate": false,
    "bLengthChange": false,
    "bFilter": false,            // OPTIONAL
    "bSorting": false,
    "bInfo": true,
    "bAutoWidth": false,
 });
   function getData() {

     $.ajax({
     type: "POST",
     url: "<?php echo base_url('your_controler/function_name'); ?>",
     data: aoData,
     error: function(response) {
       alert('Error')
     },
    success: function(response) {
       setTable(response);
    }
  });
 }

 function setTable(response) {
   var obj = JSON.parse(response);
   var t = $('#Slider_table').dataTable();
   t.clear().draw();
   $.each(obj, function(index, value) {
        var a = value.a;
        var b = value.b;
        var c = value.c;
        t.row.add([
           a,
           b,
           c
        ]).draw(false);  
   })
 }

So everytime you reload or insert a new data,you just have to call getData() function to load a new set of data you just insert. And t.clear().draw(); will clear all data from tbody,and replaced it with new one . Hope this helps

来源：https://stackoverflow.com/questions/55381781/how-to-send-ajax-request-in-datatables-in-codeigniter

标签

php

codeigniter