1

jQueryのDatatableプラグインに問題があります...テーブルに入力しましたが、特定の列に次のようなセルがあります。

<a href="26" name="PO">12</a>

onclickイベントを防止しましたが、次のコードがトリガーされます。

$( 'a[name="PO"]' ).click(function(){
            event.preventDefault();
            var POid = $( this ).attr('href');
            var element = $( this );
            $( '<div id="Dialog">\
                <p class="error"></p>\
                <p style="text-align:center;" class="main">Entrez le P.O. associé à la commande</p>\
                <input type="text" class="POprompt"/>\
                </div>').dialog({
                resizable: false,
                height: 'auto',
                width:'400',
                modal: true,
                title: 'Ajout d\'un PO',
                show: 'blind',
                hide: 'drop',
                buttons:{
                    "Sauvegarder":function() {
                        $('.error').css('color','FF0000');
                        var prompt = $('.POprompt').val();
                        if (!isNaN(parseInt(prompt)))
                        {
                            $.post('setPO.php',{'PO':prompt,'id':POid},function(data)
                            {
                                element.text( prompt );
                                $('.main').css('color','#0F0');
                                $('.POprompt').css('visible','false');
                                $('.main').text("L\'ajout a été effectué avec succès.")
                                $( this ).dialog( "close" );
                                $('.error').text("");
                                $('.error').css('color','#FFF');
                            });
                        }
                        else
                        {
                            var error = $('.error');

                            error.text("Veuillez entrer des chiffres seulement.");
                            error.addClass( "ui-state-highlight" );
                            setTimeout(function() {
                                error.removeClass( "ui-state-highlight", 1500 );
                            }, 1000 );
                        }
                        $('.error').css('color','FF0000');
                    },
                    "Annuler":function() 
                        {
                            $( this ).dialog( "close" );
                        }       
                }
            } );
        });

しかし、2ページまたは3ページに移動した場合、または結果を並べ替えてそのセルリンクをクリックしたが、行が最初のページとは別のページで生成された場合、JavaScriptはトリガーされません。

誰かアイデアがありますか？よろしくお願いします。良い一日を。

4

3 に答える 3

4

私はこの質問に答えられたことを理解しています、しかし、それは不完全であり、すべての正当な敬意を持っておそらく間違っています。マルチページデータテーブルの問題は、ユーザーがデフォルトの最初のページ以外のページをクリックすると、最初のセレクターが役に立たなくなることです。これは、dataTableがテーブルをレンダリングするためにDOMに対していくつかの恐ろしいことを行うためです。これには、クリックハンドラーを無効にするという副作用があります。

良いニュースは、すべての要素をリストする以外に、これを処理する方法があるということです。

それ以外の...

$( 'a[name="PO"]' ).click(function(){

これを試して：

$( "#dataTable tbody" ).on('click', 'a[name="PO"]', function(){

このjqueryページ（on（））を読み、遅延セレクターに関するセクションを探します。

于 2013-05-23T13:51:40.973 に答える
2

javascriptがドキュメントに要素を挿入するとき、onclickがないためです。jQueryは自動的にonclickを追加しません。

解決策：データがロードされるたびに（ユーザーがページを変更したり、テーブルを並べ替えたりしたときに）、このスクリプトを呼び出します。

于 2012-07-25T16:08:26.790 に答える
2

これを追加することで、ようやくすべてが正常に機能するようになりました。

"bLengthChange": true,

私のデータテーブル宣言に。

また、オプションを変更して<select>、デフォルトですべての行をロードする「すべて表示」オプションを追加しましたが、を設定したため、ページロードで5行しか表示されません"iDisplayLength": 5。長さ選択入力（合計）に「すべて表示」値を追加する方法は次のとおりです。

$(document).ready(function(){
    $('table').dataTable({
        "bLengthChange":true,
        "bFilter":true,
        "iDisplayLength": 5,
        "sDom":'<"H"lfr>t<"F"ip>',
        "oLanguage":{
            "sUrl": "dataTables.txt"
        }
    });
});

テキストファイルには、すべての翻訳（必要な場合）とカスタムSELECTが含まれています。

{
    "sProcessing":     "Processing...",
    "sLengthMenu": "Show <select><option value=-1>INFINITE</option></select> results"
}

注：もちろん、selectANDdatatable宣言に他のオプションを追加しました。この方法で読む方が簡単です。パートは、value=-1JavaScriptをすべての行/セルにロードする方法です。

私を助けてくれた人たちのおかげで、あなたの答えは両方とも私にとって役に立ちました！

于 2012-07-25T20:30:17.720 に答える