Ajax datatable not reloading in codeigniter 3.1.0

Question

Я использую Codigniter 3.0 , и у меня есть страница, на которой я перечисляю своего клиента с помощью функции ajax datatable.

Я использовал следующий код.

http://mbahcoding.com/php/codeigniter/codeigniter-ajax-crud-modal-server-side-validation.html

Вот ссылка скачать для вышеприведенного примера http://www.mediafire.com/download/elmnr3m2kugdkh8/ajax_crud_datatables_with_validation_update5.zip

Моя проблема после создания нового клиента или обновить информацию о клиентах моя DataTable не перегрузочный. он не создает ошибок в консоли, но отображает «Обработка» и ничего, Я проверил в консоли. он получает свежие данные, но не передает/обновляет данные.

я попытался так много кода, чтобы обновить как

$('#sample_2').dataTable().api().ajax.reload(); 
$("#sample_2").api().ajax.reload(); 
table.ajax.reload(null,false); //reload datatable ajax // var table = $("$sample2"); here 
table.api().draw(); 

является то, что может быть DataTable версия проблема?

даже поиск также не работает.

Вот мой контроллер:

<?php 
defined('BASEPATH') OR exit('No direct script access allowed'); 

class Experts extends CI_Controller { 

    public function __construct() { 
     parent::__construct(); 

     //Check Validation 
     checkAdminValidate();   

     // Load Admin Experts Model 
     $this->load->model('Adminexperts_model','experts'); 
    } 

    /* 
    * @function : index 
    * @date-created : 19th Auth 2016 
    * @autor : Punit Gajjar 
    * @purpose : To render the all the list of the experts 
    */ 
    public function index() 
    { 

     $data['content'] = 'insoadmin/experts';   
     $this->load->view("insoadmin/insoadmin_master" , $data); // redering the View 
    } 

    /* 
    * @function : getExperts 
    * @date-created : 19th Auth 2016 
    * @autor : Punit Gajjar 
    * @purpose : To get the list of all the experts for Datatable 
    */  
    public function ajax_list(){ 

     $list = $this->experts->get_datatables(); 
     $data = array(); 
     $no = $_POST['start']; 


     foreach ($list as $experts) { 
      $no++; 
      $row = array(); 
      /* 
      $row[] = '<label class="mt-checkbox mt-checkbox-single mt-checkbox-outline"> 
          <input type="checkbox" class="checkboxes" name="experts[]" value="'.$experts->expert_id.'" /> 
          <span></span> 
         </label>'; 
         */ 
      $row[] = $experts->first_name; 
      $row[] = $experts->email_address; 
      $row[] = $experts->skype_id; 
      $row[] = $experts->skype_id; 

      //add html for action 
      $row[] = '<a class="btn btn-sm btn-primary" href="javascript:void(0)" title="Edit" onclick="edit_experts('."'".$experts->expert_id."'".')"><i class="glyphicon glyphicon-pencil"></i> Edit</a> 
         <a class="btn btn-sm btn-danger" href="javascript:void(0)" title="Hapus" onclick="delete_experts('."'".$experts->expert_id."'".')"><i class="glyphicon glyphicon-trash"></i> Delete</a>'; 

      $data[] = $row; 
     } 

     $output = array(
      "draw" => "1", 
      "recordsTotal" => $this->experts->count_all(), 
      "recordsFiltered" => $this->experts->count_filtered(), 
      "data" => $data, 
     ); 
     //output to json format 
     echo json_encode($output); 

    } 

    public function ajax_edit($id) 
    { 
     $data = $this->experts->get_by_id($id); 
     echo json_encode($data); 
    } 

    public function ajax_add() 
    { 
     $this->_validate(); 
     $data = array(
       'first_name' => $this->input->post('first_name'), 
       'last_name' => $this->input->post('last_name'), 
       'skype_id' => $this->input->post('skype_id'), 
      ); 
     $insert = $this->experts->save($data); 
     echo json_encode(array("status" => TRUE)); 
    } 

    public function ajax_update() 
    {   
     $this->_validate(); 
     $data = array(
       'first_name' => $this->input->post('first_name'), 
       'last_name' => $this->input->post('last_name'), 
       'skype_id' => $this->input->post('skype_id'), 
      ); 
     $this->experts->update(array('expert_id' => $this->input->post('id')), $data); 
     echo json_encode(array("status" => TRUE)); 
    } 

    public function ajax_delete($id) 
    { 
     $this->experts->delete_by_id($id); 
     echo json_encode(array("status" => TRUE)); 
    } 


    private function _validate() 
    { 
     $data = array(); 
     $data['error_string'] = array(); 
     $data['inputerror'] = array(); 
     $data['status'] = TRUE; 

     if($this->input->post('first_name') == '') 
     { 
      $data['inputerror'][] = 'first_name'; 
      $data['error_string'][] = 'First name is required'; 
      $data['status'] = FALSE; 
     } 

     if($this->input->post('last_name') == '') 
     { 
      $data['inputerror'][] = 'last_name'; 
      $data['error_string'][] = 'Last name is required'; 
      $data['status'] = FALSE; 
     } 

     if($this->input->post('skype_id') == '') 
     { 
      $data['inputerror'][] = 'skype_id'; 
      $data['error_string'][] = 'Skype Id is required'; 
      $data['status'] = FALSE; 
     } 

     if($data['status'] === FALSE) 
     { 
      echo json_encode($data); 
      exit(); 
     } 
    } 

} 
?> 

Вот моя модель:

<?php 
class Adminexperts_model extends CI_Model { 

    var $table = 'tbl_experts'; 
    var $column_order = array('first_name','last_name','skype_id','email_address','created_date','modified_date','status'); //set column field database for datatable orderable 
    var $column_search = array('first_name','last_name','skype_id','email_address','created_date','modified_date','status'); //set column field database for datatable searchable 
    var $order = array('expert_id' => 'asc'); // default order 

    function __construct(){ 
     parent::__construct(); 
    } 

    private function _get_datatables_query() 
    { 

     $this->db->from($this->table); 

     $i = 0; 

     foreach ($this->column_search as $item) // loop column 
     { 
      if($_POST['search']['value']) // if datatable send POST for search 
      { 

       if($i===0) // first loop 
       { 
        $this->db->group_start(); // open bracket. query Where with OR clause better with bracket. because maybe can combine with other WHERE with AND. 
        $this->db->like($item, $_POST['search']['value']); 
       } 
       else 
       { 
        $this->db->or_like($item, $_POST['search']['value']); 
       } 

       if(count($this->column_search) - 1 == $i) //last loop 
        $this->db->group_end(); //close bracket 
      } 
      $i++; 
     } 

     if(isset($_POST['order'])) // here order processing 
     { 
      $this->db->order_by($this->column_order[$_POST['order']['0']['column']], $_POST['order']['0']['dir']); 
     } 
     else if(isset($this->order)) 
     { 
      $order = $this->order; 
      $this->db->order_by(key($order), $order[key($order)]); 
     } 
    } 

    function get_datatables() 
    { 
     $this->_get_datatables_query(); 
     if($_POST['length'] != -1) 
     $this->db->limit($_POST['length'], $_POST['start']); 
     $query = $this->db->get(); 
     return $query->result(); 
    } 

    function count_filtered() 
    { 
     $this->_get_datatables_query(); 
     $query = $this->db->get(); 
     return $query->num_rows(); 
    } 

    public function count_all() 
    { 
     $this->db->from($this->table); 
     return $this->db->count_all_results(); 
    } 

    public function get_by_id($id) 
    { 
     $this->db->from($this->table); 
     $this->db->where('expert_id',$id); 
     $query = $this->db->get(); 

     return $query->row(); 
    } 

    public function save($data) 
    { 
     $this->db->insert($this->table, $data); 
     return $this->db->insert_id(); 
    } 

    public function update($where, $data) 
    { 
     $this->db->update($this->table, $data, $where); 
     return $this->db->affected_rows(); 
    } 

    public function delete_by_id($id) 
    { 
     $this->db->where('expert_id', $id); 
     $this->db->delete($this->table); 
    } 

} 

Вот мой Вид:

<!-- BEGIN PAGE LEVEL PLUGINS --> 
<link href="<?php echo base_url();?>assets/global/plugins/datatables/datatables.min.css" rel="stylesheet" type="text/css" /> 
<link href="<?php echo base_url();?>assets/global/plugins/datatables/plugins/bootstrap/datatables.bootstrap.css" rel="stylesheet" type="text/css" /> 
<link href="<?php echo base_url();?>assets/global/css/plugins-md.min.css" rel="stylesheet" type="text/css" /> 
<!-- END PAGE LEVEL PLUGINS --> 

<div class="page-content-wrapper"> 
    <!-- BEGIN CONTENT BODY --> 
    <div class="page-content"> 
     <!-- BEGIN PAGE HEAD--> 
     <div class="page-head"> 
      <!-- BEGIN PAGE TITLE --> 
      <div class="page-title"> 
       <h1>Managed Datatables 
        <small>managed datatable samples</small> 
       </h1> 
      </div> 
      <!-- END PAGE TITLE --> 
      <!-- BEGIN PAGE TOOLBAR --> 
      <div class="page-toolbar"> 
       <!-- BEGIN THEME PANEL --> 
       <div class="btn-group btn-theme-panel"> 
        <a href="javascript:;" class="btn dropdown-toggle" data-toggle="dropdown"> 
         <i class="icon-settings"></i> 
        </a> 
        <div class="dropdown-menu theme-panel pull-right dropdown-custom hold-on-click"> 
         <div class="row"> 
          <div class="col-md-4 col-sm-4 col-xs-12"> 
           <h3>HEADER</h3> 
           <ul class="theme-colors"> 
            <li class="theme-color theme-color-default active" data-theme="default"> 
             <span class="theme-color-view"></span> 
             <span class="theme-color-name">Dark Header</span> 
            </li> 
            <li class="theme-color theme-color-light " data-theme="light"> 
             <span class="theme-color-view"></span> 
             <span class="theme-color-name">Light Header</span> 
            </li> 
           </ul> 
          </div> 
          <div class="col-md-8 col-sm-8 col-xs-12 seperator"> 
           <h3>LAYOUT</h3> 
           <ul class="theme-settings"> 
            <li> Layout 
             <select class="layout-option form-control input-small input-sm"> 
              <option value="fluid" selected="selected">Fluid</option> 
              <option value="boxed">Boxed</option> 
             </select> 
            </li> 
            <li> Header 
             <select class="page-header-option form-control input-small input-sm"> 
              <option value="fixed" selected="selected">Fixed</option> 
              <option value="default">Default</option> 
             </select> 
            </li> 
            <li> Top Dropdowns 
             <select class="page-header-top-dropdown-style-option form-control input-small input-sm"> 
              <option value="light">Light</option> 
              <option value="dark" selected="selected">Dark</option> 
             </select> 
            </li> 
            <li> Sidebar Mode 
             <select class="sidebar-option form-control input-small input-sm"> 
              <option value="fixed">Fixed</option> 
              <option value="default" selected="selected">Default</option> 
             </select> 
            </li> 
            <li> Sidebar Menu 
             <select class="sidebar-menu-option form-control input-small input-sm"> 
              <option value="accordion" selected="selected">Accordion</option> 
              <option value="hover">Hover</option> 
             </select> 
            </li> 
            <li> Sidebar Position 
             <select class="sidebar-pos-option form-control input-small input-sm"> 
              <option value="left" selected="selected">Left</option> 
              <option value="right">Right</option> 
             </select> 
            </li> 
            <li> Footer 
             <select class="page-footer-option form-control input-small input-sm"> 
              <option value="fixed">Fixed</option> 
              <option value="default" selected="selected">Default</option> 
             </select> 
            </li> 
           </ul> 
          </div> 
         </div> 
        </div> 
       </div> 
       <!-- END THEME PANEL --> 
      </div> 
      <!-- END PAGE TOOLBAR --> 
     </div> 
     <!-- END PAGE HEAD--> 
     <!-- BEGIN PAGE BREADCRUMB --> 
     <ul class="page-breadcrumb breadcrumb"> 
      <li> 
       <a href="index.html">Home</a> 
       <i class="fa fa-circle"></i> 
      </li> 
      <li> 
       <a href="#">Tables</a> 
       <i class="fa fa-circle"></i> 
      </li> 
      <li> 
       <span class="active">Datatables</span> 
      </li> 
     </ul> 
     <!-- END PAGE BREADCRUMB --> 

     <div class="row"> 
      <div class="col-md-12 col-sm-12"> 
       <!-- BEGIN EXAMPLE TABLE PORTLET--> 
       <div class="portlet light portlet-fit portlet-datatable bordered"> 
        <div class="portlet-title"> 
         <div class="caption"> 
          <i class=" icon-layers font-green"></i> 
          <span class="caption-subject font-green sbold uppercase">Experts List</span> 
         </div> 
         <div class="actions"> 
          <a class="btn btn-circle btn-icon-only btn-default" href="javascript:;"> 
           <i class="icon-cloud-upload"></i> 
          </a> 
          <a class="btn btn-circle btn-icon-only btn-default" href="javascript:;"> 
           <i class="icon-wrench"></i> 
          </a> 
          <a class="btn btn-circle btn-icon-only btn-default" href="javascript:;"> 
           <i class="icon-trash"></i> 
          </a> 
         </div> 
        </div> 
        <div class="portlet-body"> 
         <br /> 
         <button class="btn btn-default" onclick="reload_table()"><i class="glyphicon glyphicon-refresh"></i> Reload</button> 
         <br /> 
         <br /> 
         <table class="table table-striped table-bordered table-hover order-column" id="sample_2"> 
          <thead> 
           <tr> 
            <th> Expert Name </th> 
            <th> Email </th> 
            <th> Skype Id </th> 
            <th> Status </th> 
            <th> Action </th> 
           </tr> 
          </thead> 
          <tbody> 
          </tbody> 
         </table> 
        </div> 
       </div> 
       <!-- END EXAMPLE TABLE PORTLET--> 
      </div> 
     </div> 
     <!-- END PAGE BASE CONTENT --> 
    </div> 
    <!-- END CONTENT BODY --> 
</div> 



<!-- Bootstrap modal --> 
<div class="modal fade" id="modal_form" role="dialog"> 
    <div class="modal-dialog"> 
     <div class="modal-content"> 
      <div class="modal-header"> 
       <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button> 
       <h3 class="modal-title">Expert Form</h3> 
      </div> 
      <div class="modal-body form"> 
       <form action="#" id="form" class="form-horizontal"> 
        <input type="hidden" value="" name="id"/> 
        <div class="form-body"> 
         <div class="form-group"> 
          <label class="control-label col-md-3">First Name</label> 
          <div class="col-md-9"> 
           <input name="first_name" placeholder="First Name" class="form-control" type="text"> 
           <span class="help-block"></span> 
          </div> 
         </div> 
         <div class="form-group"> 
          <label class="control-label col-md-3">Last Name</label> 
          <div class="col-md-9"> 
           <input name="last_name" placeholder="Last Name" class="form-control" type="text"> 
           <span class="help-block"></span> 
          </div> 
         </div> 
         <div class="form-group"> 
          <label class="control-label col-md-3">Skype Id</label> 
          <div class="col-md-9"> 
           <input name="skype_id" placeholder="Skype Id" class="form-control" type="text"> 
           <span class="help-block"></span> 
          </div> 
         </div> 
        </div> 
       </form> 
      </div> 
      <div class="modal-footer"> 
       <button type="button" id="btnSave" onclick="save()" class="btn btn-primary">Save</button> 
       <button type="button" class="btn btn-danger" data-dismiss="modal">Cancel</button> 
      </div> 
     </div><!-- /.modal-content --> 
    </div><!-- /.modal-dialog --> 
</div><!-- /.modal --> 
<!-- End Bootstrap modal --> 

<!-- BEGIN PAGE LEVEL PLUGINS --> 
<script src="<?php echo base_url();?>/assets/global/scripts/datatable.js" type="text/javascript"></script> 
<script src="<?php echo base_url();?>/assets/global/plugins/datatables/datatables.min.js" type="text/javascript"></script> 
<script src="<?php echo base_url();?>/assets/global/plugins/datatables/plugins/bootstrap/datatables.bootstrap.js" type="text/javascript"></script> 
<!-- END PAGE LEVEL PLUGINS --> 


<!-- BEGIN PAGE LEVEL SCRIPTS --> 
<script type="text/javascript"> 
    var table = $('#sample_2'); 

    table.dataTable({ 

     "processing": true, //Feature control the processing indicator. 
     "serverSide": true, //Feature control DataTables' server-side processing mode. 
     "order": [], //Initial no order. 

     // Load data for the table's content from an Ajax source 
     "ajax": { 
      "url": "<?php echo site_url('insoadmin/experts/ajax_list')?>", 
      "type": "POST" 
     }, 

     //Set column definition initialisation properties. 
     "columnDefs": [ 
     { 
      "targets": [ -1 ], //last column 
      "orderable": false, //set not orderable 
     }, 
     ], 

    }); 

    var tableWrapper = jQuery('#sample_2_wrapper'); 

    table.find('.group-checkable').change(function() { 
     var set = jQuery(this).attr("data-set"); 
     var checked = jQuery(this).is(":checked"); 
     jQuery(set).each(function() { 
      if (checked) { 
       $(this).prop("checked", true); 
      } else { 
       $(this).prop("checked", false); 
      } 
     }); 
    }); 


    //set input/textarea/select event when change value, remove class error and remove text help block 
    $("input").change(function(){ 
     $(this).parent().parent().removeClass('has-error'); 
     $(this).next().empty(); 
    }); 
    $("textarea").change(function(){ 
     $(this).parent().parent().removeClass('has-error'); 
     $(this).next().empty(); 
    }); 
    $("select").change(function(){ 
     $(this).parent().parent().removeClass('has-error'); 
     $(this).next().empty(); 
    }); 

    function add_experts() 
    { 
     save_method = 'add'; 
     $('#form')[0].reset(); // reset form on modals 
     $('.form-group').removeClass('has-error'); // clear error class 
     $('.help-block').empty(); // clear error string 
     $('#modal_form').modal('show'); // show bootstrap modal 
     $('.modal-title').text('Add Expert'); // Set Title to Bootstrap modal title 
    } 

    function edit_experts(id) 
    { 
     save_method = 'update'; 
     $('#form')[0].reset(); // reset form on modals 
     $('.form-group').removeClass('has-error'); // clear error class 
     $('.help-block').empty(); // clear error string 

     //Ajax Load data from ajax 
     $.ajax({ 
      url : "<?php echo site_url('insoadmin/experts/ajax_edit/')?>/" + id, 
      type: "GET", 
      dataType: "JSON", 
      success: function(data) 
      { 

       $('[name="id"]').val(data.expert_id); 
       $('[name="first_name"]').val(data.first_name); 
       $('[name="last_name"]').val(data.last_name); 
       $('[name="skype_id"]').val(data.skype_id); 

       $('#modal_form').modal('show'); // show bootstrap modal when complete loaded 
       $('.modal-title').text('Edit Expert'); // Set title to Bootstrap modal title 

      }, 
      error: function (jqXHR, textStatus, errorThrown) 
      { 
       alert('Error get data from ajax'); 
      } 
     }); 
    } 

    function reload_table() 
    { 
     //$('#sample_2').dataTable().api().ajax.reload(); 
     //$("#sample_2").api().ajax.reload(); 
     table.ajax.reload(null,false); //reload datatable ajax 
     //table.api().draw(); 
    } 

    function save() 
    { 
     $('#btnSave').text('saving...'); //change button text 
     $('#btnSave').attr('disabled',true); //set button disable 
     var url; 

     if(save_method == 'add') { 
      url = "<?php echo site_url('insoadmin/experts/ajax_add')?>"; 
     } else { 
      url = "<?php echo site_url('insoadmin/experts/ajax_update')?>"; 
     } 

     // ajax adding data to database 
     $.ajax({ 
      url : url, 
      type: "POST", 
      data: $('#form').serialize(), 
      dataType: "JSON", 
      success: function(data) 
      { 

       if(data.status) //if success close modal and reload ajax table 
       { 
        $('#modal_form').modal('hide'); 
        reload_table(); 
       } 
       else 
       { 
        for (var i = 0; i < data.inputerror.length; i++) 
        { 
         $('[name="'+data.inputerror[i]+'"]').parent().parent().addClass('has-error'); //select parent twice to select div form-group class and add has-error class 
         $('[name="'+data.inputerror[i]+'"]').next().text(data.error_string[i]); //select span help-block class set text error string 
        } 
       } 
       $('#btnSave').text('save'); //change button text 
       $('#btnSave').attr('disabled',false); //set button enable 


      }, 
      error: function (jqXHR, textStatus, errorThrown) 
      { 
       alert('Error adding/update data'); 
       $('#btnSave').text('save'); //change button text 
       $('#btnSave').attr('disabled',false); //set button enable 

      } 
     }); 
    } 

    function delete_experts(id) 
    { 
     if(confirm('Are you sure delete this expert?')) 
     { 
      // ajax delete data to database 
      $.ajax({ 
       url : "<?php echo site_url('insoadmin/experts/ajax_delete')?>/"+id, 
       type: "POST", 
       dataType: "JSON", 
       success: function(data) 
       { 
        //if success reload ajax table 
        $('#modal_form').modal('hide'); 
        reload_table(); 
       }, 
       error: function (jqXHR, textStatus, errorThrown) 
       { 
        alert('Error deleting data'); 
       } 
      }); 

     } 
    } 

</script> 
<!-- END PAGE LEVEL SCRIPTS --> 

Answer 1

Здравствуйте, пожалуйста, проверьте ваш persons.php контроллер там вы использовали формат как

$row[] = $person->firstName; 
$row[] = $person->lastName; 
$row[] = $person->gender; 
$row[] = $person->address; 
$row[] = $person->dob; 

Пожалуйста, измените его

$row[] = $person->firstname; 
$row[] = $person->lastname; 
$row[] = $person->gender; 
$row[] = $person->address; 
$row[] = $person->dob; 

Дайте нам знать, что работает или нет. После изменения. Я могу иметь обновленную таблицу

Пожалуйста, добавьте «bStateSave»: true

$(document).ready(function() { 

    //datatables 
    table = $('#table').DataTable({ 

     "processing": true, //Feature control the processing indicator. 
     "serverSide": true, //Feature control DataTables' server-side processing mode. 
     "order": [], //Initial no order. 

     // Load data for the table's content from an Ajax source 
     "ajax": { 
      "url": "<?php echo site_url('person/ajax_list')?>", 
      "type": "POST" 
     }, 

     //Set column definition initialisation properties. 
     "columnDefs": [ 
     { 
      "targets": [ -1 ], //last column 
      "orderable": false, //set not orderable 
     }, 
     ], 
     "bStateSave": true, 
    }); 

По вашему сценарию поиск будет работать после добавления bStateSave. Вы также можете обратиться к документации API поиска, которая приведена здесь. https://datatables.net/reference/api/search() Это поможет вам лучше понять. Как мой ответ помог вам.