我使用 jQuery 和 Datatables 来显示大约 300 个数据库行。该表位于 jQuery UI 对话框中,并通过 AJAX 请求下载。下载后,我想在每一行上创建 jQuery UI 按钮以进行编辑和删除。这需要很长时间(在一些“弱”客户端上),而且真的很烦人。有没有办法让它更快?我试过 INPUT type="button" 有点快但很难看。有什么想法/建议吗?先感谢您!!!
编辑在这里插入按钮的最后两行是一些代码:
$('<div id="wdw1000frm"></div>').dialog({
parent : '#wdw1000',
autoOpen : false,
closeOnEscape : false,
height : 500,
maxHeight : 500,
minHeight : 500,
minWidth : 700,
position : [479, 68],
title : 'Arrivals',
width : 1000
});
DWM.showForm("1000", "arrivals", "Arrivals", "Arrivals");
$("#wdw1000_tbl").dataTable({
"bJQueryUI" : true,
"bPaginate" : false,
"bProcessing" : true,
"bLengthChange" : false,
"bFilter" : true,
"bSort" : true,
"bInfo" : false,
"bAutoWidth" : false,
"sScrollY" : "300px",
"sDom" : "<\"H\"lfr>tS<\"F\"ip>",
"fnInitComplete" : function() {
this.fnSettings().oScroller.fnScrollToRow(64);
},
"bDeferRender" : false,
"oLanguage" : {
"sProcessing" : "Επεξεργασία...",
"sLengthMenu" : "Δείξε _MENU_ στοιχεία",
"sZeroRecords" : "Δεν βρέθηκαν στοιχεία που να ταιριάζουν",
"sInfo" : "Εμφάνηση _START_ έως _END_ από _TOTAL_ στοιχεία",
"sInfoEmpty" : "Εμφάνηση 0 έως 0 από 0 στοιχεία",
"sInfoFiltered" : "(εφαρμογή φίλτρου σε _MAX_ συνολικά στοιχεία)",
"sInfoPostFix" : "",
"sSearch" : "Αναζήτηση:",
"oPaginate" : {
"sFirst" : "Πρώτη",
"sPrevious" : "Προηγούμενη",
"sNext" : "Επόμενη",
"sLast" : "Τελευταία"
}
},
"aaData" : [['168', '00:10-1', '1339708200', 'TRA 232', 'Sundsvall', 'SDL', '', '', '', '0', '', '0', '3', 'Cancelled', 'CAN', '<div class="Edit"></div>', '<div class="Delete"></div>'],
['169', '00:45-1', '1339710300', 'AEE 261', 'Varkaus', 'VRK', '', '', '', '0', '', '0', '5', 'New Time', 'NET', '<div class="Edit"></div>', '<div class="Delete"></div>'],
['170', '01:15-1', '1339712100', 'FPO 228', 'Indianapolis', 'IND', '', '', '', '0', '', '0', '5', 'Diverted', 'DIV', '<div class="Edit"></div>', '<div class="Delete"></div>'],
.
.
.
['300', '08:10+1', '1339909800', 'LT 3620', 'Sao Joao', 'QSJ', '', '', '', '0', '', '0', '3', '', '', '<div class="Edit"></div>', '<div class="Delete"></div>']],
"aoColumns" : [{
"bVisible" : false
}, {
"aDataSort" : [2, 1],
"sClass" : "alignLeft",
"sTitle" : "STM",
"sWidth" : "100px"
}, {
"bVisible" : false
}, {
"sClass" : "alignLeft",
"sTitle" : "FN",
"sWidth" : "100px"
}, {
"sClass" : "alignLeft",
"sTitle" : "CITY"
}, {
"bVisible" : false
}, {
"sClass" : "alignLeft",
"sTitle" : "VIA"
}, {
"bVisible" : false
}, {
"sClass" : "alignLeft",
"sTitle" : "EST",
"sWidth" : "100px"
}, {
"bVisible" : false
}, {
"sClass" : "alignLeft",
"sTitle" : "ACT",
"sWidth" : "100px"
}, {
"bVisible" : false
}, {
"sClass" : "alignCenter Editable",
"sTitle" : "BAG",
"sWidth" : "100px"
}, {
"sClass" : "alignLeft",
"sTitle" : "REM"
}, {
"bVisible" : false
}, {
"sTitle" : " ",
"sWidth" : "10px",
"bSortable" : false,
"sClass" : "Edit"
}, {
"sTitle" : " ",
"sWidth" : "10px",
"bSortable" : false,
"sClass" : "Delete"
}]
});
$('#wdw1000_tbl div.Edit').button ({ icons : {primary : 'ui-icon-pencil'},text : false,label : 'Edit'});
$('#wdw1000_tbl div.Delete').button ({ icons : {primary : 'ui-icon-pencil'},text : false,label : 'ui-icon-trash'});