动态创建列

时间:2015-08-22 12:00:17

标签: jquery datatables

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

我第一次获得包含9列的数据时,我能够创建包含9列的DataTable。

点击后我得到包含6列的新数据,我可以用这6列创建DataTable并正确显示数据。

我的问题是:当我显示数字时,我仍然获得9列,显示正确显示6列,并且还显示了以前表格的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>

这是我的代码如何获得人气并获得我的TABLECOLUMN:

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>"
   });

我希望我清楚地了解我的问题: 基本上我正在尝试使用与来自服务器的数据相关的列数来创建数据表。

0 个答案:

没有答案