jQueryとDatatablesを使用して、約300のデータベース行を表示しています。テーブルはjQueryUIダイアログ上にあり、AJAXリクエストとともにダウンロードされます。ダウンロード後、編集と削除のためにすべての行にjQueryUIボタンを作成したいと思います。これは(一部の「弱い」クライアントでは)長い時間がかかり、本当に迷惑です。それを速くする方法はありますか?INPUT type = "button"を試しましたが、少し高速ですが醜いです。アイデア/提案はありますか?前もって感謝します!!!
ここにボタンを挿入する最後の2行を編集すると、コードの一部になります。
$('<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'});