jQuery dataTables並選擇一行

Question

我試圖讓jQuery dataTable以這樣一種方式運行，即用戶可以選擇一行，然后單擊一個按鈕（位於頁面的其他位置，但不在桌面上或其中）並彈出一個JS警報。

這是我的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和/或其他）？ 提前致謝！

Answer 1

你正在使用jQuery，你也可以保持正軌。

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

另外，ID必須是唯一的，但我相信你知道，所以請確保你不要一遍又一遍地重復使用相同的ID。

此外，如果在執行.ready()之后將此元素添加到DOM中，則需要將事件處理程序附加到靜態父元素，以便它可以正確地委派click事件。

$(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作為一個例子

對於未來的用戶，以及可能會發現這些有用的任何其他人

jQuery提供的:eq()選擇器無法利用.querySelectorAll()來獲得相當大的性能提升。 因此，目前，你應該總是使用.eq() :eq() 。

Answer 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] );
    } );
});

Answer 3

我對動態數據加載表有類似的問題。 每次我添加內容時，舊節點都會消失，丟失鏈接的事件。 我解決了數據加載后調用函數的問題：

    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
            }
        });

這一行應該替換第一個示例的注釋行。 現在可以從鍵盤使用該表，使用intro或空格鍵進行選擇。 請記住將tabindex = 0添加到表中插入的元素，以便我們可以使用Tab鍵進行導航。

Answer 4

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

這與你想要的類似。