jquery - datatables.draw() 不绘制表格

问题描述

我在 codeigniter 中从数据库中获取结果并使用 datatables.draw() 方法将其显示在数据表中，一切正常，ajax 响应工作正常，过滤器工作但数据表没有被绘制并且它显示为空白，当我检查元素时，我可以看到隐藏在行和列中的数据。

这是我的html代码

                  <div class="dropdown bootstrap-select show-tick bs3" style="width: 100%;">
                    <select class="selectpicker" id="sel_lang" data-width="100%" data-none-selected-text="Filter by Language" tabindex="-98">
                      <option value="">Select language</option>
                       <option value="en">English</option>
                       <option value="es">Spanish</option>

                  </select>
              </div>
      

                  <div class="dropdown bootstrap-select show-tick bs3" style="width: 100%;">
                    <select class="selectpicker" id="sel_dest" data-width="100%" data-none-selected-text="Filter by Destination" tabindex="-98">
                      <option value="">Select Destination</option>
                      <option value="India">India</option>
                      <option value="Nepal">Nepal</option>
                      <option value="Nepal">Bhutan</option>
                  </select>
              </div>

              <table class="apitable table dt-table" id="tourlist_table">
                 <thead>
                    <th><?php echo _l('tour_id'); ?></th>
                    <th><?php echo _l('tour_name'); ?></th>
                    <th><?php echo _l('tour_price'); ?></th>
                    <th><?php echo _l('tour_countries'); ?></th>
                 </thead>
               </table>

这是我的jQuery代码

<script type="text/javascript">

   $(document).ready(function(){

   var tourlistDataTable = $('#tourlist_table').DataTable({
     'bDestroy': true,
     'processing': true,
     'serverSide': true,
     'serverMethod': 'post',
     "searching": true,
     'ajax': {
        'url':'<?php echo admin_url('tourismo/tourismo/gettotaltours'); ?>',
        'data': function(data){
           data.searchlang = $('#sel_lang').val();
           data.searchDest = $('#sel_dest').val();
        }
     },
     'columns': [
        { data: 'tourid' },
        { data: 'tourname' },
        { data: 'tourprice' },
        { data: 'countries' },
     ]
   });

   $('#sel_lang,#sel_dest').change(function(){
      tourlistDataTable.draw();
   });
});
</script>

这是我的控制器

    public function gettotaltours()
{
  // POST data
 $postData = $this->input->post();

  // Get data
  $data = $this->tourismo->fetch_total_tours($postData);

  echo json_encode($data);
}

这是我的模型

    public function fetch_total_tours($postData=null)
{
    $response = array();

    ## Read value
    $draw = $postData['draw'];
    $start = $postData['start'];
    $rowperpage = $postData['length']; // Rows display per page
    $columnIndex = $postData['order'][0]['column']; // Column index
    $columnName = $postData['columns'][$columnIndex]['data']; // Column name
    $columnSortOrder = $postData['order'][0]['dir']; // asc or desc
    $searchValue = $postData['search']['value']; // Search value

    // Custom search filter
     $searchLang = $postData['searchlang'];
     $searchDest = $postData['searchDest'];


     ## Search
    $search_arr = array();
    $searchQuery = "";
    if($searchValue != ''){
       $search_arr[] = " (tourname like '%".$searchValue."%' or
        countries like '%".$searchValue."%' or
        tourplaces like'%".$searchValue."%' ) ";
    }
    if($searchLang != ''){
       $search_arr[] = " language='".$searchLang."' ";
    }
    if($searchDest != ''){
       $search_arr[] = " countries like '%".$searchDest."%' ";
    }

    if(count($search_arr) > 0){
       $searchQuery = implode(" and ",$search_arr);
    }

    ## Total number of records without filtering
     $this->db->set_dbprefix('');
     $this->db->select('count(*) as allcount');
     $records = $this->db->get('tourtable')->result();
     $totalRecords = $records[0]->allcount;

     ## Total number of record with filtering
     $this->db->select('count(*) as allcount');
     if($searchQuery != '')
     $this->db->where($searchQuery);
     $records = $this->db->get('tourtable')->result();
     $totalRecordwithFilter = $records[0]->allcount;

     ## Fetch records
     $this->db->select('*');
     if($searchQuery != '')
     $this->db->where($searchQuery);
     $this->db->order_by($columnName, $columnSortOrder);
     $this->db->limit($rowperpage, $start);
     $records = $this->db->get('tourtable')->result();

     $data = array();

     foreach($records as $record ){

       $data[] = array(
         "tourid"=>$record->tourid,
         "tourname"=>$record->tourname,
         "tourprice"=>$record->tourprice,
         "countries"=>$record->countries,
         "banner"=>$record->banner,
         "duration"=>$record->duration,
         "slug"=>$record->tourslug
       );
     }

     ## Response
    $response = array(
      "draw" => intval($draw),
      "iTotalRecords" => $totalRecords,
      "iTotalDisplayRecords" => $totalRecordwithFilter,
      "aaData" => $data
    );

    return $response;

}

我通过数据表 ajax 得到的响应样本

   {
  "draw": 3,
  "iTotalRecords": "58",
  "iTotalDisplayRecords": "3",
  "aaData": [
    {
      "tourid": "97",
      "tourname": "16 Días Nepal Bhutan Y India ",
      "tourprice": "",
      "countries": "India,Nepal,Bhutan",
      "banner": "https://www.myurl.com/upload/highlights-of-nepal.jpg",
      "duration": "16",
      "slug": "16-dias-nepal-bhutan-y-india"
    },
    {
      "tourid": "104",
      "tourname": "6 Días Nepal Viajes",
      "tourprice": "",
      "countries": "Nepal",
      "banner": "https://www.myurl.com/upload/highlights-of-nepal.jpg",
      "duration": "6",
      "slug": "6-dias-nepal-viajes"
    },
    {
      "tourid": "105",
      "tourname": "11 Dias Nepal Viajes",
      "tourprice": "",
      "countries": "Nepal",
      "banner": "https://www.myurl.com/upload/pokhra-annapurna-tour-nepal.jpg",
      "duration": "11",
      "slug": "11-dias-nepal-viajes"
    }
  ]
}

这就是它的外观（一张空白表）

当我检查元素并将 table_loading 类不透明度从 0 更改为 1 时，这表明数据存在，但无法绘制最终表格。

任何帮助将不胜感激。

标签： jquerydatatablescodeigniter-3

jquery - datatables.draw() 不绘制表格

问题描述

解决方案

推荐阅读