DataTables如何在jquery或javascript中动态添加它们答案

【问题标题】：DataTables how to add them dynamically in jquery or javascriptDataTables如何在jquery或javascript中动态添加它们
【发布时间】：2012-04-04 01:35:52
【问题描述】：

我在网站上使用 jQuery DataTable，但每次按下不同的超链接时，表中的所有数据都会发生变化。因此，与其删除行并逐个添加它们，还有一种方法可以动态删除整个 DataTable 并使用数组的所有数据重新创建另一个。

这里的代码只是计划旧的静态东西，但我知道如何动态获取数组，假设当我从 python/cherryPy 取回数组时，数组看起来像这样： ar[n]=["col1","col2","col3","col4",..."coln"] :

下面的代码是在HTML中创建DataTable的静态代码（静态）...

<div id="div1" class="ctnr">
   <table id="mainTable1" class="dtable" cellpadding="3" cellspacing="1" border="0">
    <thead>
        <tr><th>*</th><th>Proposal</th><th>Vote </th><th> For </th><th>dd</th><th>A</th></tr>
    </thead>
    <tbody id="tbdy"> 
       <tr id="zrow1" class="gradeX"><td><input id="ckb1" type="checkbox" class = "tb" /></td><td id="ppl1" class="ppsal" style="width:55%">BlaBlaBla</td><td>More BlaBlaBla</td><td class="ralign"> CheeCheeChee</td><td class="ralign"> ChooChoo...</td><td class="ralign"> LaLaLa</td></tr>
    </tbody>
  </table>
</div>

我将如何在 JavaScript 或 jQuery 中做到这一点？

丹尼斯

【问题讨论】：

你试过什么？寻找一点点输入？试试 jquery 的 .html() 函数
我看过DataTable论坛，似乎每个人都针对特殊情况做出了巨大而复杂的回复。我只需要一个通用案例。它必须简单
使用 json 填充是一种很常见的方法。见stackoverflow.com/questions/9760661/…
谢谢，我可以传输数据了。这不是我的担心。

标签： javascript jquery

【解决方案1】：

DataTables 允许您使用他们所谓的“data sources”以编程方式定义表的结构和数据。

文档中有一些示例。我不确定哪一个适合您，但这里有一些可以帮助您入门：

DataTables dynamic creation example（使用 JS 数组）
DataTables AJAX source example（通过AJAX使用JS数组）

您可以将其与 the bDestroy() method 结合使用，以避免重新创建 <table> 标记。

另一种方法是重新设置行而不重新创建表。我知道没有 setData() 方法，但您可以使用 fnClearTable() 和 fnAddData() 方法来获得相同的结果。您可以在DataTables API docs 中阅读有关这些方法的更多信息。

【讨论】：

你就是乔纳森！正是我想要的……谢谢。我还没说完，但是我在“DataTables 动态创建示例”中看到了我需要的解决方案
我已将数据表添加到元素`$("#element").dataTable()` 现在我想从该元素中删除数据表。我怎样才能做到这一点。 ??????
@SarfrazAhmad，你应该创建一个新问题...你要找的是fnDestroy():datatables.net/api
谢谢 Dotjon，我也创建了一个新问题，请参见此处 [stackoverflow.com/questions/20427543/…'

【解决方案2】：

你好，我遇到了同样的问题……我就是这样解决的……

我在 laravel 控制器中有这个函数......它循环并动态创建一个表......基于 $app_id 变量......我必须将数据表附加到它......在运行时......

public function getAppUserProfile(Request $request){
    $app_id = $request['appId'];
    $configs = Userconfig::with('user')->where('config_id', $app_id)->get();
    $ct = 1;
    $str = '';
    foreach($configs as $config){

           // $config->user->id,
            $str .= '<tr><td>'. $ct.'</td><td>'.
                    $config->user->profile->first_name
                 .'</td><td>'.
                    $config->user->profile->first_name
                .'</td><td>'.
                    $config->user->profile->first_name
                .'</td></tr>';

            $ct++;
    }

    $tb = '<table id="testTable2" class="table table-striped table-bordered"><thead>';
    $tb .= '<tr><th>S/N</th><th>USER NAME</th><th>ASSIGN ROLE</th><th>Add</th></tr>'; 
    $tb .= '</thead><tbody>' . $str . '</tbody></table>';


    //return json_encode($configs);

}

$str 函数用于保存构造的表数据...我将表直接回显到页面中的 div 标记中，id 为“panel_data_tb”，这是在 javascript 文件中完成的。

function showAppUser() {
    $('.loading').css('display', 'block');
    var appID = $('#app_search').val();
    $.ajax({
        method: 'get',
        url: getauprofile,
        data: {appId: appID}
    })
        .done(function (result) {
           // alert('success '  + result);
           $('#panel_data_tb').html(result);
            $('.loading').css('display', 'none');


            //this line here is what initializes the datatable on the 
            //current table just being created... 
            //dynamically.. and it worked. perfectly for me.. 
            //******************************************************

            $('#panel_data_tb').find('table').DataTable();

            //*******************************************************


        });

}

最后一行.. 在 Div 标记中找到表并动态初始化其上的 datatable() 属性。因此，每当您更改表的内容时，数据表都会在正在创建的动态表上重新初始化..

我希望这会有所帮助。谢谢。

【讨论】：