将 datatable 属性添加到动态创建的表中答案

【问题标题】：Add datatable attribute to a dynamically created table将 datatable 属性添加到动态创建的表中
【发布时间】：2016-12-19 05:36:04
【问题描述】：

我有一个在按钮单击时动态创建的表。我可以得到结果，但问题是结果没有搜索框和分页。以下是我的代码：

查看：

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

控制器：

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)

请告诉我我做错了什么。谢谢。

【问题讨论】：

确保数据表插件是在 jquery 加载后加载的

标签： javascript jquery ajax twitter-bootstrap

【解决方案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>

【讨论】：

正确，我必须更加小心拼写...它应该是“$('#tbl_results').DataTable”而不是“$('#tbl_results').Datatable”。 . 谢谢。