我有一个表,我在其中设置数据加载并尝试刷新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
}
});
});