Как отправить запрос ajax в Datatables в Codeigniter

Question

Я использовал это ignited_datatables https://github.com/IgnitedDatatables/Ignited-Datatables в моем CodeIgniter project. Он успешно возвращает data из database. Но главное problem заключается в том, что когда я добавляю new record, вновь вставленные данные не отображаются в таблице automatically, а когда я refresh на странице, тогда данные newly inserted отображаются в table , поэтому я хочу показать эти данные автоматически через ajax, а мне не нужно refresh страницы.

Мой взгляд

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

Этот скрипт внутри вида

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

Answer 1

Вы можете использовать метод ajax.reload ()

     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();
});

Answer 2

я всегда делал это при каждом просмотре моей страницы

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

Таким образом, каждый раз, когда вы перезагружаете или вставляете новые данные, вам просто нужно вызвать функцию getData () , чтобы загрузить новый набор данных, который вы только что вставили. И t.clear (). Draw (); удалит все данные из tbody и заменит их новыми. Надеюсь, это поможет

Answer 3

Я думаю, что вам нужно использовать метод draw () после успеха, чтобы обновить отображение таблицы.

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

согласно документации.пожалуйста, обратитесь Draw ()