动态创建列

Question

我正在尝试根据从服务器获取的 JSON 数据创建 DataTable 列。

我第一次获取包含 9 列的数据，我能够创建包含 9 列的数据表。

单击后我获得了包含 6 列的新数据，我能够使用这 6 列创建数据表并正确显示数据。

我的问题是：当我显示数据时，我仍然得到 9 列TABLE，其中 6 列正确显示，并且还显示了之前 TABLE 的 3 列。列大小未从 9 更改为 6。

这是我的代码：

function recreateTable(tableData,tableColumn,searchvalue){

        table = $('#example').DataTable(
        {
           "aaData": tableData,
           "aLengthMenu": [[5, 10, 20, -1], [5, 10, 20, "All"]],
           "iDisplayLength": 5,
           "aoColumnDefs" :tableColumn,
           "oSearch": {"sSearch": searchvalue},
           "bDestroy": true

        });


        $('.dataTables_filter input').focus();

        $('.dataTables_filter input').keyup(function() {
    searchvalue = $(this).val();
    if (searchvalue.length>3) {

       if(table.search( this.value ))
       {
    $.ajax({
                        url: 'search.php?method=searchdata',
                        type: "POST",   
                        dataType:'json',
                        data :{'searchvalue':searchvalue},
                        success:function(result){
                            //alert("success");
                            singleData=[];
                             for(var i=0;i<result.length;i++){
                                var obj = result[i];
                                for(var key in obj){
                                    singleData.push(obj[key]);
                                }

                             }
                                new_instance_id = singleData[0];
                                present = false;

                               for(var i=0;i<tableData.length;i++)
                                {

                                    instance_id=tableData[i][0];

                                    if(new_instance_id==instance_id){
                                     present = true;
                                     break;
                                } 
                                }

                              //  alert(present);

                               if(!present){
                                   tableData.push(singleData);
                                   table.clear();
                                   table.destroy();
                                   recreateTable(tableData,tableColumn,searchvalue);
                                  }


                          },
                          error :function(result){

                         // alert("failure in search");
                          }
    });
    }}
    }); 


}//FUNCTION CLOSE

我的HTML:

<table id="example" class="table table-striped table-bordered table-hover dataTable" aria-describedby="bTable2_info" style="width: 100%;">
  <thead>
    <tr></tr>
  </thead>
  <tbody></tbody>
</table>

这是我的代码如何填充和获取我的 TABLE列 :

columnnames =[];  //VARIABLE TO GET ALL KEYS WHICH WILL BE MY COLUMNS IN DATATABLE
    tableColumn =[]; // THIS IS THE ARRAY I AM PASSING TO aoColumnDefs

    singleData = []; //THIS IS TEMPORARY ARRAY TO POPULATE JSON DATA/VALUES 

    tableData =[]; // THIS THE ARRAY I AM PASSING TO aaData


    //getting first json object.
    var obj = data[0];
    alert(obj.price);


  //GETTING ALL COLUMN NAMES
  for(var key in obj){
  columnnames.push(key);}


  //SETTING COLUMN NAMES FOR DATATABLE

  for (var i=0; i < columnnames.length; i++ ) {
  tableColumn.push({
            "sTitle": columnnames[i].toUpperCase(),
            "aTargets": [i]
   });
  }

  //THIS CODE IS TO PUSH BUTTON AS DEFAULT IN LAST COLUMN
  tableColumn.push({

            "sTitle": "Action",
            "aTargets": [i],
            "sDefaultContent":"<button class='btn btn-minier btn-inverse'><i class='icon-calendar'></i> Daily Report</button>"
   });

我希望我清楚我的问题：基本上我正在尝试创建包含关于来自服务器的数据的列数的数据表。

Answer 1

将此代码添加到 recreateTable 函数的顶部，如下所示：

function recreateTable(tableData,tableColumn,searchvalue){
    // If table was previously initialized
    if ($.fn.DataTable.isDataTable('#example')){
        // Destroy the table
        $('#example').DataTable().destroy();

        // Remove all content
        $('#example').empty();
    }    

    // ... skipped ...
}

动态创建列

Dynamically creating columns

jquery

datatables