datatable无法使用jquery设置id

时间:2014-05-09 13:13:06

标签: jquery html jquery-datatables

我有一个表,我在其中设置数据加载并尝试刷新ajax请求。我无法为每个td设置属性id。而且因为我想隐藏几列,我把bvisible视为假。由于这个原因,td本身正在消失,所以我无法获得表格中点击td的数据。

在加载时,我们获取历史数据,如下所示,

  var historydata ='{history_result= <tr><td id="sid"> 1</td><td id="sid1">2</td><td id="sid3">123</td><td style="display:none;" id="txt1">test</td><td style="display:none;" id="txt2">a</td><td style="display:none;" id="txt3"></td><td style="display:none;" id="txt4"></td><td style="display:none;" id="txt5"></td><td style="display:none;" id="input1">input1</td><td style="display:none;" id="input2">input2</td><td style="display:none;" id="input3">input3</td><td style="display:none;" id="input4">input4</td><td style="display:none;" id="input5">input5</td><td style="display:none;" id="datainput"> data </td></tr>}';
$('#gridResult').append(historydata);
    $("#gridResult").dataTable({
          "iDisplayLength": 5,            
           "aLengthMenu": [[5,10,20], [5,10,20]],
            "bLengthChange": false
    });

}); 

我在这里通过我的html代码设置表格如下,

<table class="table table-bordered" id="gridResult">                                                                     
<thead>
 <tr class="active">
    <th>sid</th>
    <th>sid1</th>
     <th>sid3</th>
      <th style="display: none">input1</th>
      <th style="display: none">input2</th>
      <th style="display: none">input3</th>
      <th style="display: none">input4</th>
      <th style="display: none">input5</th>
      <th style="display: none">txt1</th>
      <th style="display: none">txt2</th>
      <th style="display: none">txt3</th>
       <th style="display: none">txt4</th>
       <th style="display: none">txt5</th>
      <th style="display: none">datainput</th>
    </tr>
   </thead>
   </table>

在Ajax请求中,我们在gridResult中设置数据如下, ajax的数据格式如下,

    var historydata = {"history_result":[[1,"0.075","106","","fname","","","","data","data1","data2","data3","data4","data5"],[2,"0.001","1","lname","a","","","","newdata1","newdata2","newdata3","newdata4","newdata5","newdata6"]]}';

我正在使用这种方式设置数据。

               var arySearchHistory = [];
               for (var i=3; i <= 13; i++ ) {                                               arySearchHistory.push({
                                        "aTargets": [i], 
                                        "bVisible": false                                   
                                    });
                                    };
                                    $('#gridResult') .dataTable({                                                                                    
                                            "aaData" : history_result,
                                               "aLengthMenu": [[5,10,20], [5,10,20]],
                                               "iDisplayLength": 5,
                                                "aoColumnDefs":  arySearchHistory,
                                                "bDestroy": true,                                                   
                                                "bLengthChange": false
                                    });

我们无法在&#34; aoColumnDefs&#34;中的数据表中设置id。因为我们把bVisible设为false,所以我们无法在表格中看到td。

单击“开始”,我们需要使用以下代码获取数据。

   $('#gridResult').on('click', 'tr', function() {
    $(this).find("td").each(function() {            
        var key = $(this).attr('id');
        var value = $(this).html();
            alert(value);
        if (key == "input1")
            $('#sid').val(value);
        if (key == 'input2')
            $('#sid2').val(value);
        if (key == 'input3')
            $('#sid3').val(value);
        if (key == "input4")
            $('#sid4').val(value);
        if (key == "input5")
            $('#sid5').val(value);
        if (key == "txt1")
            $('#txt1').val(value);
        if (key == 'txt2')
            $('#txt2').val(value);
        if (key == 'txt3')
            $('#txt3').val(value);
        if (key == "txt4")
            $('#txt4').val(value);
        if (key == "txt5")
            $('#txt5').val(value);
        if (key == "Query") {
             // todo: on click of the data, we need to do some functionality here
        }
    });
});

0 个答案:

没有答案