我正在使用DataTables以及jquery-datatables-editable,使用服务器端处理和隐藏的详细信息行。
它运行良好,除了每行都有一个“id”,它等于显示隐藏细节行的可点击图像。例如,表格中的每一行(从firebug或chrome element inspector查看)如下所示:
<tr id="<img src="images/details_open.png">" class="odd">
<td class="center"><img src="images/details_open.png"></td>
<td class=" sorting_1">Carpet By Joe</td>
<td class="">Joe</td><td class="">123-456-7890</td>
<td class="">ad@here.com</td>
</tr>
这是javascript:
$(document).ready(function() {
var what = "customer";
/* Init DataTables */
var oTable = $('#example').dataTable({
"bJQueryUI" : true,
//"bProcessing" : true,
"bServerSide" : true,
"sPaginationType" : "full_numbers",
"sAjaxSource" : "lib/gen.php?what=" + what,
"aoColumns" : [{
"sClass" : "center",
"bSortable" : false,
}, {
"sName" : "name",
"mData" : "2"
}, {
"sName" : "contact",
"mData" : "3"
}, {
"sName" : "phone",
"mData" : "4"
}, {
"sName" : "email",
"mData" : "5"
}],
"aaSorting" : [[1, 'desc']]
}).makeEditable({
sUpdateURL : "lib/edit.php?what=" + what + "&action=edit",
sAddURL : "lib/edit.php?what=" + what + "&action=add",
sDeleteURL : "DeleteData.php",
sAddDeleteToolbarSelector : ".dataTables_length",
"oAddNewRowFormOptions" : {
"title" : "Add A New Customer",
"width" : 400,
"height" : 450
},
"aoColumns" : [null, {
cssclass : 'required'
}, {
indicator : "<img src='images/indicator.gif'>",
tooltip : "Doubleclick to edit...",
event : "dblclick",
style : "inherit",
}]
});
/* Formating function for row details */
function fnFormatDetails(nTr) {
var aData = oTable.fnGetData(nTr);
//var id = aData[1];
var sOut = '<div>';
var sOut = '<table cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;">';
sOut += '<tr><th width="75" align="left"> </th><th width="300" align="left">Address Information</th><th align="left">Notes</th></tr>';
sOut += '<tr><td><strong>Address: </strong></td><td class="5"><div class="edittable">' + aData[6] + '</div></td><td style="vertical-align: top;" class="9" rowspan="4"><div class="edittextarea">' + aData[10] + '</div></td></tr>';
sOut += '<tr><td><strong>City: </strong></td><td class="6"><div class="edittable">' + aData[7] + '</div></td></tr>';
sOut += '<tr><td><strong>State: </strong></td><td class="7"><div class="edittable">' + aData[8] + '</div></td></tr>';
sOut += '<tr><td><strong>Zip: </strong></td><td class="8"><div class="edittable">' + aData[9] + '</div></td></tr>';
sOut += '</table>';
return sOut;
}
$('#example tbody td img').live('click', function() {
var nTr = this.parentNode.parentNode;
if (this.src.match('details_close')) {
/* This row is already open - close it */
this.src = "images/details_open.png";
oTable.fnClose(nTr);
} else {
/* Open this row */
this.src = "images/details_close.png";
oTable.fnOpen(nTr, fnFormatDetails(nTr), 'details');
//make_jeditable(nTr);
}
});
});
这是我的服务器端处理的输出(json位于底部,这是传递给数据表的内容,数组是为了便于阅读):
Array
(
[sEcho] => 0
[iTotalRecords] => 3
[iTotalDisplayRecords] => 3
[aaData] => Array
(
[0] => Array
(
[0] => <img src="images/details_open.png">
[1] => 1
[2] => Company 1
[3] => Joe Bob
[4] => 123-456-7890
[5] => admin@here.com
[6] => 123 My Way
[7] => Fayetteville
[8] => AR
[9] => 12345
[10] => This is a note for this customer, 1
[extra] => hrmll
[DT_RowId] => 1
)
[1] => Array
(
[0] => <img src="images/details_open.png">
[1] => 2
[2] => Aaron's Floor Cleaning
[3] => Aaron Man
[4] => (133) 456-7890
[5] => email@there.com
[6] => 321. There Way
[7] => Scottsdale
[8] => AR
[9] => 54327
[10] => This is another note, but about another customer, 36
[extra] => hrmll
[DT_RowId] => 2
)
[2] => Array
(
[0] => <img src="images/details_open.png">
[1] => 4
[2] => Carpet By Joe
[3] => Joe
[4] => 123-456-7890
[5] => ad@here.com
[6] => 123 SW Way Over St.
[7] => Springfield
[8] => AL
[9] => 87654
[10] => This is a note here.
[extra] => hrmll
[DT_RowId] => 4
)
)
)
{"sEcho":0,"iTotalRecords":"3","iTotalDisplayRecords":"3","aaData":[{"0":"<img src=\"images\/details_open.png\">","1":"1","2":"Company 1","3":"Joe Bob","4":"123-456-7890","5":"admin@here.com","6":"123 My Way","7":"Fayetteville","8":"AR","9":"12345","10":"This is a note for this customer, 1","extra":"hrmll","DT_RowId":"1"},{"0":"<img src=\"images\/details_open.png\">","1":"2","2":"Aaron's Floor Cleaning","3":"Aaron Man","4":"(133) 456-7890","5":"email@there.com","6":"321. There Way","7":"Scottsdale","8":"AR","9":"54327","10":"This is another note, but about another customer, 36\n","extra":"hrmll","DT_RowId":"2"},{"0":"<img src=\"images\/details_open.png\">","1":"4","2":"Carpet By Joe","3":"Joe","4":"123-456-7890","5":"ad@here.com","6":"123 SW Way Over St.","7":"Springfield","8":"AL","9":"87654","10":"This is a note here.","extra":"hrmll","DT_RowId":"4"}]}
以下是表格中的HTML:
<table cellpadding="0" cellspacing="0" border="0" class="display" id="example">
<thead>
<tr>
<th width="4%"></th>
<th width="25%">Customer Name</th>
<th width="20%">Contact</th>
<th width="20%">Phone</th>
<th width="25%">Email</th>
</tr>
</thead>
<tbody>
<tr>
<td colspan="8" class="dataTables_empty">Loading data from server</td>
</tr>
</tbody>
<tfoot>
<tr>
<th></th>
<th>Customer Name</th>
<th>Contact</th>
<th>Phone</th>
<th>Email</th>
</tr>
</tfoot>
</table>
返回的信息具有“DT_RowId”项,但不会将其解析为行的ID。如果我能提供任何进一步的信息,请告诉我。
编辑:
Aktee,你是个天才。
我删除了这个:
[0] => <img src="images/details_open.png">
从服务器端处理完全,并根据您的建议我的javascript顶部现在看起来像:
"aoColumns" : [{
"sClass" : "center",
"mData": function () {
return '<img src="images/details_open.png">';
},
"bSortable" : false
},
我在文档中注意到它提到'mData'是'mDataProp'的较新版本,所以我用它来代替。您的其他建议正在引导我重新考虑我的其他一些代码。非常感谢你。
答案 0 :(得分:1)
似乎dataTable使用[0]作为id名称。这是不好的。试着把它推倒......
或者使用这些提示:
使用mDataProp而不是mData。你将拥有更多的控制权,而且在阅读代码时会更加符合逻辑。此外,在添加内容时,您不必确保拥有正确的索引。
aoColumns: [
{ mDataProp: "customername", bSortable: true },
{ mDataProp: "contact", bSortable: true },
]
JSON输出类似于
[aaData] => Array
(
[0] => Array
(
[company] => Company 1
[customername] => Joe Bob
我注意到你总是把src =“images / details_open.png”作为[0]。这有点浪费带宽。相反,试试这个
aoColumns: [
[...]
{ mDataProp: function(x) {
return '<img src="images/details_open.png">';
}, bSortable: true },
]
这非常有用,因为你可以做这样的事情!
aoColumns: [
[...]
{ mDataProp: function(x) {
return '<img src="images/details_open.png" data-id="' + x.id + '">';
}, bSortable: true },
]
如果要编辑每一行,请使用fnDrawCallBack ...
fnDrawCallback: function ( oSettings ) {
if ( oSettings.aiDisplay.length == 0 ) {
return;
}
var TRs = $('#lst_production tbody tr');
var iColspan = TRs[0].getElementsByTagName('td').length;
for ( var i=0 ; i<TRs.length ; i++ ) {
var iDisplayIndex = oSettings._iDisplayStart + i;
data = oSettings.aoData[ oSettings.aiDisplay[iDisplayIndex] ]._aData;
// add the ID to the row
$(TRs[i]).attr("id", data.id);
// add class red-background if customer is from AR
if (data.state == 'AR') {
$(TRs[i]).addClass("red-background");
}
}
},