4

ユーザーが行を選択してボタン（ページの他の場所にあるが、テーブルやその中ではなく）をクリックしてJSアラートをポップアップできるように、jQuery dataTableを動作させようとしています。

ここに私のデータテーブルがあります:

$("#my-datatable").dataTable( {
    "bProcessing" : true,
    // Commenting out next line
    //"sDom" : 't',
    "sAjaxSource" : "some/url/on/my/server",
    "sAjaxDataProp" : "",
    "bDestroy" : true,
    "fnServerData" : function(sSource, aoData, fnCallback) {
        aoData.push({
            "name" : "asking",
            "value" : "yes"
        });

        request = $.ajax({
            "dataType" : "json",
            "type" : "GET",
            "url" : sSource,
            "data" : aoData,
            "success" : fnCallback
        });
    },

    "aoColumns" : [
        {
            "mDataProp" : "name"
        },
        {
            "mDataProp" : "expr"
        },
        {
            "mDataProp" : "seq"
        }
    ]
});

これが私のボタンです：

<div id="bam-btn-div">
    <input type="button" id="bam-btn" value="BAM!" onclick="bam();"/>
</div>

ユーザーが dataTable の行を選択してボタンをクリックすると、次の関数が呼び出されます。

function bam() {
    alert("Deleting the selected row");

    // Delete the selected row in the dataTable
}

最後に、jQuery dataTable が入力しようとしている HTML テーブル:

<div id="datatable-div">
    <table id="optconfig-datatable">
        <thead>
            <tr>
                <th>Name</th>
                <th>Expression</th>
                <th>Sequence</th>
            </tr>
        </thead>
        <tbody></tbody>
    </table>
</div>

ここの例に従おうとしましたが、何も動作しませんでした。(dataTable および/またはその他に) 追加する必要がある構成を誰でも見つけることができますか? 前もって感謝します！

4

4 に答える 4

3

jQueryを使用しているので、順調に進んでいる方がよいでしょう。

$('#bam-btn').on('click', function(){
    alert("BAM!");
});

ちなみに、IDは一意である必要がありますが、それはご存知のとおりです。同じIDを何度も再利用しないように注意してください。

さらに、この要素が.ready()実行後にDOMに追加された場合は、クリックイベントを適切に委任できるように、イベントハンドラーを静的な親要素にアタッチする必要があります。

$(document).on('click', '#bam-btn', function(){
    alert("BAM");
});

上記はそのままにしておきます。将来誰が役立つかわからないため、回答の一部全体を削除するのは好きではありません。

まず、すべての関数のすべてのスコープで使用できる変数を作成する必要があります。このようにして、変数を参照して、削除する要素を取得できます。

この変数は、ドキュメントレディ関数の外部に配置する必要があります

var theRow = '';
$(document).ready(function(){ 
    //existing code here
});

'グローバルスコープ'変数が準備されたので、いつでも変更してアクセスできます。

var theRow = '';
$(document).ready(function(){ 
    $('tr').click(function(){
        //we need to store a unique piece of information about this row.
        //Without much to go on, I'm going to rely on the index.
        theRow = $(this).index();
    });

    $('#bam-btn').click(function(){
       $('tr').eq(theRow).remove(); 
    });
});​

そしてここに例としてあなたのまともな働くjsFiddleがあります

将来のユーザー、およびこれが役立つと思われる他の人のために

:eq()jQueryによって提供されるセレクターは、パフォーマンスを大幅に向上させるために活用することはできません。.querySelectorAll()このため、そして当面の間、常に.eq()以上を使用する必要があります:eq()。

于 2012-10-17T02:32:59.673 に答える
2

次のことを確認してください。

function bam() {
    alert("BAM!");
}

このステートメントにはありません：

$(document).ready(function() {
    // STATEMENT
});

関数がにある場合$(document).ready()、それはそのスコープ、特にそのスコープでのみ使用可能であることを意味しますfunction()。

$(document).ready()コードをステートメントの上または下に移動するとonclick、ボタンのイベントハンドラーがコードを見つけて呼び出すことができます。

データテーブルから特定の要素を削除するには、次のJavaScriptを試してください。

$(document).ready(function() {
    var oTable = $("#my-datatable").dataTable( {
        "bProcessing" : true,
        // Commenting out next line
        //"sDom" : 't',
        "sAjaxSource" : "some/url/on/my/server",
        "sAjaxDataProp" : "",
        "bDestroy" : true,
        "fnServerData" : function(sSource, aoData, fnCallback) {
            aoData.push({
                "name" : "asking",
                "value" : "yes"
            });

            request = $.ajax({
                "dataType" : "json",
                "type" : "GET",
                "url" : sSource,
                "data" : aoData,
                "success" : fnCallback
            });
        },

        "aoColumns" : [
            {
                "mDataProp" : "name"
            },
            {
                "mDataProp" : "expr"
            },
            {
                "mDataProp" : "seq"
            }
        ]
    });$("#my-datatable").dataTable( {
        "bProcessing" : true,
        // Commenting out next line
        //"sDom" : 't',
        "sAjaxSource" : "some/url/on/my/server",
        "sAjaxDataProp" : "",
        "bDestroy" : true,
        "fnServerData" : function(sSource, aoData, fnCallback) {
            aoData.push({
                "name" : "asking",
                "value" : "yes"
            });

            request = $.ajax({
                "dataType" : "json",
                "type" : "GET",
                "url" : sSource,
                "data" : aoData,
                "success" : fnCallback
            });
        },

        "aoColumns" : [
            {
                "mDataProp" : "name"
            },
            {
                "mDataProp" : "expr"
            },
            {
                "mDataProp" : "seq"
            }
        ]
    });

    $('button#bam-btn').on('click', function() {
        var anSelected = fnGetSelected( oTable );
        oTable.fnDeleteRow( anSelected[0] );
    } );
});
于 2012-10-17T02:29:36.300 に答える
0

動的データロードのあるテーブルでも同様の問題がありました。コンテンツを追加するたびに、古いノードが消え、リンクされたイベントが失われます。データのロード後に関数を呼び出す問題を解決しました。

    function insertevents(table_id){
        var oTable = jQuery('#'+tableid).dataTable( {"bRetrieve": true });
        oTable.$('tr').click(function(){
            jQuery(this).toggleClass('row_selected');
        } );
        // Extra code here
    }

テーブルは以前に初期化されているため、「bRetrieve」パラメーターを追加することが重要です。

また、アクセシビリティのためにキーボード イベントを制御する機能を改善しました。

        oTable.$('tr').keyup( function(event) {
            if (event.which == 13 || event.which == 32) {
                event.preventDefault();
                jQuery(this).toggleClass('row_selected');
            }       
        } ); 
        oTable.$('tr').keydown( function(event) {
            if (event.which == 13 || event.which == 32) {
                event.preventDefault(); // Desactivamos este efecto
            }
        });

この一連の行は、最初の例のコメント行を置き換える必要があります。これで、イントロまたはスペース キーで選択して、キーボードからテーブルを使用できるようになりました。テーブルに挿入された要素に tabindex=0 を追加することを忘れないでください。これにより、タブ キーで移動できるようになります。

于 2013-06-20T08:04:16.523 に答える
0

http://editor.datatables.net/release/DataTables/extras/Editor/examples/index.html

これはあなたが望むものに似ています。

于 2013-06-21T20:02:16.293 に答える