2012-06-15 64 views
0

我使用帶數據表的jQuery顯示大約300個數據庫行。該表位於jQuery UI對話框中,並通過AJAX請求下載。下載後,我想在每一行上創建jQuery UI按鈕進行編輯和刪除。這需要很長時間(在一些'弱'客戶),這真的很煩人。有沒有辦法讓它更快?我嘗試了輸入類型=「按鈕」,有點快但很難看。任何想法/建議?先謝謝你!!!jQuery Datatables性能

編輯 最後兩行此處插入按鈕是一些代碼:

$('<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" : "&nbsp;", 
      "sWidth" : "10px", 
      "bSortable" : false, 
      "sClass" : "Edit" 
     }, { 
      "sTitle" : "&nbsp;", 
      "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'}); 
+2

對某人看不到的代碼進行富有成效的評論是一項運動。我們會得到如此多的猜測,還是一勞永逸?請發佈您的代碼。 –

+0

是你需要哪一部分代碼的基調? – Johntor

+0

考慮將它帶到[代碼評論](http://codereview.stackexchange.com)。我建議至少緩存jQuery對象和其他可能的變量。請參閱:http://stackoverflow.com/questions/5724400/does-using-this-instead-of-this-provide-a-performance-enhancement –

回答

4

我通過使用mRenderfnRowCallback接近類似的性能問題,存在予分離從排序內容的顯示內容並在返回用於顯示一個空的內容功能。這極大地縮短了初始化時間。

fnRowCallback每當一行變得可見時被調用,所以在這裏我創建了我的更復雜的標記。在你的例子中,按鈕,在我的情況下,我有2000行和表中的一些鏈接需要15秒才能顯示。應用我的修復後,它減少到不到一秒鐘。如果你對一些更詳細的代碼示例感興趣,請查看我的blog post

1

您可以將這些按鈕只有當行捕獲鼠標懸停事件,並刪除它們鼠標移開時?那麼你也可以或許重新使用DOM元素:)

我的2美分,

的Aurelien

+0

你有一個點在這裏!但是我會有兩排醜陋的空位! – Johntor

+0

難道你不能只用JavaScript回調注入一個img元素嗎? – Arcadien

+0

對不起,延遲迴復。我會嘗試併發回! – Johntor

1

你有沒有考慮使用具有此功能內置在數據表編輯器?

我用一個項目,做正是你在找什麼(該行是庫存,以及客戶希望能夠添加/刪除)

http://editor.datatables.net/

和實例的數據表編輯器: http://editor.datatables.net/release/DataTables/extras/Editor/examples/inlineControls.html

+0

我也試過,問題是數據驗證。我想提供一個外部窗體作爲編輯器與autocmplete,列表框,多選擇... – Johntor