動的に作成されたテーブルにdatatable属性を追加する

Question

私は、ボタンをクリックすると動的に作成されるテーブルを持っています。私は結果を得ることができますが、結果は検索ボックスとページネーションがありません。以下は私のコードです：

VIEW：

<div id="log-list"> 
</div> 

<script type="text/javascript" src="<?=base_url()?>assets/jquery/jquery.js"></script> 
<script type="text/javascript" src="<?=base_url()?>assets/js/chart.min.js"></script> 
<script type="text/javascript" src="<?=base_url()?>assets/bootstrap/js/bootstrap.min.js"></script> 
<script type="text/javascript" src="<?=base_url()?>assets/datatables/js/jquery.dataTables.min.js"></script> 
<script type="text/javascript" src="<?=base_url()?>assets/datatables/js/dataTables.bootstrap.js"></script> 
<script type="text/javascript" src="<?=base_url()?>assets/jquery/jquery-ui.min.js"></script> 
<script type="text/javascript"> 
$(document).ready(function(){ 
$('input[name=date_from]').val('<?echo date('Y-m-d')?>'); 
$('input[name=date_to]').val('<?echo date('Y-m-d')?>'); 

$('#btn_view_records').click(function(){ 
    $.ajax({ 
     type:"POST", 
     data:$('#form_filter').serialize(), 
     datatype:"JSON", 
     url:"<?php echo site_url('pakyaw/get_filtered_data');?>", 
     success:function(data){ 
      $("#log-list").html(data); 

      $('#tbl_results').Datatable({ 
       "footerCallback": function (row, data, start, end, display) { 
        var api = this.api(), data; 
       } 
      }); 
     } 
    }); 
}); 
});/* end of ready */ 

</script> 

CONTROLLER：

public function get_filtered_data(){ 
     $this->load->library('table'); 
     $this->table->set_heading('Bio Id', 'Time In', 'Time Out', 'Time Rendendered'); 
     $style = array('table_open' => '<table class="table table-striped table-hover" id="tbl_results">'); 
     $this->table->set_template($style); 
     $from=$this->input->post('date_from'); 
     $to= $this->input->post('date_to'); 
     $branch_name=$this->session->userdata('branch_name'); 
     echo $this->table->generate($this->model_pakyaw->get_filtered_data($branch_name, $from, $to)); 
    } 

私のエラーは、この氏は述べています：

(index):119 Uncaught TypeError: $(...).Datatable is not a function 
    at Object.success ((index):119) 
    at fire (jquery.js:3305) 
    at Object.fireWith [as resolveWith] (jquery.js:3435) 
    at done (jquery.js:9242) 
    at XMLHttpRequest.<anonymous> (jquery.js:9484) 

私が間違っているのを教えてください。ありがとうございました。

Answer 1

スクリプトの順序は、ライブラリや他のスクリプトに依存する場合に重要です。

<script type="text/javascript" src="<?=base_url()?>assets/jquery/jquery.js"></script> 

<script type="text/javascript" src="<?=base_url()?>assets/jquery/jquery-ui.min.js"></script> 

<script type="text/javascript" src="<?=base_url()?>assets/datatables/js/jquery.dataTables.min.js"></script>