0

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" : "&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'});
4

3 に答える 3

4

mRenderとを使用し て同様のパフォーマンスの問題に取り組み、そこで表示コンテンツを並べ替えコンテンツから分離し、関数fnRowCallback内の表示用に空のコンテンツを返しました。mRenderこれにより、初期化時間が大幅に短縮されました。

fnRowCallback行が表示されるたびに呼び出されるので、ここでより「複雑な」マークアップを作成しました。あなたの例では、ボタン、私の場合、表示するのに15秒かかったテーブル内に2000行といくつかのリンクがありました。私の修正を適用した後、それは1秒未満に短縮されました。より詳細なコード例に興味がある場合は、私のブログ投稿をチェックしてください。

于 2012-10-16T22:32:52.777 に答える
1

これらのボタンは、行がマウスオーバーイベントをキャッチした場合にのみ挿入でき、mouseoutで削除できますか?次に、おそらくDOM要素を再利用することもできます:)

私の2セント、

オーレリアン

于 2012-06-16T00:06:27.593 に答える
1

この機能が組み込まれているdatatablesエディターの使用を検討しましたか?

私はあなたが探しているものを正確に実行するプロジェクトにdatatablesエディターを使用しました(行はインベントリであり、クライアントは追加/削除できることを望んでいました)

http://editor.datatables.net/

そして例: http ://editor.datatables.net/release/DataTables/extras/Editor/examples/inlineControls.html

于 2012-06-16T23:42:50.893 に答える