如何在行上獲取dataTable的ID

Question

我有以下代碼：

   $('#example').dataTable({
                "ajax": "getN.php",
                paging: false,

                "columns": [{
                        "data": "ID"
                    }, {
                        "data": "naziv"
                    }, {
                        "data": "ha"
                    },
                    {
                        "data": "ar"
                    },
                    {
                        "data": "m2"
                    },
                    {
                        "data": "lokacija"
                    },
                    {
                        "data": "osnov"
                    },
                    {
                        "data": "kat_kul"
                    },
                    {
                        "data": "akcija"
                    }
                ],
                "columnDefs": [
                        {
                    "targets": 8,
                    "data": "akcija",
                    "render": function(data, type, full, meta) {
                        // return data; 
                        return '<div style="float:right;"><button class="btn btn-warning">Izmeni</button> <button class="btn btn-info openDelete" data-toggle="modal" data-target="#delete">Izvestaj o parceli</button> <i  id="openDelete" data-toggle="modal" data-target="#delete" class="fa fa-times openDelete"></i></div>';
                    }
                },
                        {
                    "targets": 0,
                    "visible":false
                        }
]
            });

我的getN.php生成此代碼：

{"data":[{"ID":"3","0":"3","naziv":"Vocnjak N","1":"Vocnjak N","ha":"1","2":"1","ar":"1","3":"1","m2":"57","4":"57","lokacija":"iznad brdo","5":"iznad brdo","osnov":"zakup zemlje","6":"zakup zemlje","kat_kul":"vocnjak","7":"vocnjak"},{"ID":"27","0":"27","naziv":"test","1":"test","ha":"2","2":"2","ar":"2","3":"2","m2":"0","4":"0","lokacija":"1 p","5":"1 p","osnov":"komesacija","6":"komesacija","kat_kul":"vinograd","7":"vinograd"},{"ID":"82","0":"82","naziv":"sdf","1":"sdf","ha":"0","2":"0","ar":"2","3":"2","m2":"0","4":"0","lokacija":"","5":"","osnov":"vlasnistvo","6":"vlasnistvo","kat_kul":"njiva","7":"njiva"},{"ID":"81","0":"81","naziv":"mm","1":"mm","ha":"7","2":"7","ar":"7","3":"7","m2":"7","4":"7","lokacija":"NS","5":"NS","osnov":"vlasnistvo","6":"vlasnistvo","kat_kul":"njiva","7":"njiva"},{"ID":"70","0":"70","naziv":"Moja parcela 2","1":"Moja parcela 2","ha":"3","2":"3","ar":"2","3":"2","m2":"3","4":"3","lokacija":"subotica","5":"subotica","osnov":"vlasnistvo","6":"vlasnistvo","kat_kul":"vinograd","7":"vinograd"},{"ID":"80","0":"80","naziv":"ss","1":"ss","ha":"1","2":"1","ar":"4","3":"4","m2":"4","4":"4","lokacija":"Pancevo","5":"Pancevo","osnov":"vlasnistvo","6":"vlasnistvo","kat_kul":"ribnjak","7":"ribnjak"},{"ID":"94","0":"94","naziv":"minus","1":"minus","ha":"3","2":"3","ar":"3","3":"3","m2":"3","4":"3","lokacija":"","5":"","osnov":"vlasnistvo","6":"vlasnistvo","kat_kul":"njiva","7":"njiva"},{"ID":"95","0":"95","naziv":"asd","1":"asd","ha":"2","2":"2","ar":"2","3":"2","m2":"2","4":"2","lokacija":"asdasd","5":"asdasd","osnov":"ustupljeno na koriscenje","6":"ustupljeno na koriscenje","kat_kul":"njiva","7":"njiva"},{"ID":"120","0":"120","naziv":"pera","1":"pera","ha":"32","2":"32","ar":"0","3":"0","m2":"0","4":"0","lokacija":"23","5":"23","osnov":"zakup zemlje","6":"zakup zemlje","kat_kul":"njiva","7":"njiva"},{"ID":"122","0":"122","naziv":"TESTiranje add","1":"TESTiranje add","ha":"2","2":"2","ar":"3","3":"3","m2":"2","4":"2","lokacija":"sdfsdf","5":"sdfsdf","osnov":"vlasnistvo","6":"vlasnistvo","kat_kul":"njiva","7":"njiva"},{"ID":"123","0":"123","naziv":"asd","1":"asd","ha":"3","2":"3","ar":"4","3":"4","m2":"3","4":"3","lokacija":"","5":"","osnov":"vlasnistvo","6":"vlasnistvo","kat_kul":"njiva","7":"njiva"},{"ID":"124","0":"124","naziv":"asd","1":"asd","ha":"3","2":"3","ar":"4","3":"4","m2":"3","4":"3","lokacija":"","5":"","osnov":"vlasnistvo","6":"vlasnistvo","kat_kul":"njiva","7":"njiva"},{"ID":"125","0":"125","naziv":"YESSSS","1":"YESSSS","ha":"0","2":"0","ar":"9","3":"9","m2":"5","4":"5","lokacija":"nema","5":"nema","osnov":"vlasnistvo","6":"vlasnistvo","kat_kul":"vocnjak","7":"vocnjak"},{"ID":"126","0":"126","naziv":"nn","1":"nn","ha":"2","2":"2","ar":"2","3":"2","m2":"2","4":"2","lokacija":"","5":"","osnov":"vlasnistvo","6":"vlasnistvo","kat_kul":"njiva","7":"njiva"},{"ID":"127","0":"127","naziv":"aaa","1":"aaa","ha":"3","2":"3","ar":"3","3":"3","m2":"3","4":"3","lokacija":"","5":"","osnov":"vlasnistvo","6":"vlasnistvo","kat_kul":"njiva","7":"njiva"},{"ID":"128","0":"128","naziv":"bbb","1":"bbb","ha":"2","2":"2","ar":"2","3":"2","m2":"2","4":"2","lokacija":"","5":"","osnov":"vlasnistvo","6":"vlasnistvo","kat_kul":"njiva","7":"njiva"},{"ID":"129","0":"129","naziv":"gg","1":"gg","ha":"4","2":"4","ar":"4","3":"4","m2":"4","4":"4","lokacija":"","5":"","osnov":"vlasnistvo","6":"vlasnistvo","kat_kul":"njiva","7":"njiva"},{"ID":"130","0":"130","naziv":"fff","1":"fff","ha":"3","2":"3","ar":"3","3":"3","m2":"3","4":"3","lokacija":"","5":"","osnov":"vlasnistvo","6":"vlasnistvo","kat_kul":"njiva","7":"njiva"},{"ID":"131","0":"131","naziv":"www","1":"www","ha":"2","2":"2","ar":"2","3":"2","m2":"3","4":"3","lokacija":"","5":"","osnov":"vlasnistvo","6":"vlasnistvo","kat_kul":"njiva","7":"njiva"},{"ID":"132","0":"132","naziv":"uuuu","1":"uuuu","ha":"4","2":"4","ar":"4","3":"4","m2":"4","4":"4","lokacija":"","5":"","osnov":"vlasnistvo","6":"vlasnistvo","kat_kul":"njiva","7":"njiva"},{"ID":"133","0":"133","naziv":"qqq","1":"qqq","ha":"5","2":"5","ar":"5","3":"5","m2":"5","4":"5","lokacija":"","5":"","osnov":"vlasnistvo","6":"vlasnistvo","kat_kul":"njiva","7":"njiva"},{"ID":"134","0":"134","naziv":"kkk","1":"kkk","ha":"8","2":"8","ar":"8","3":"8","m2":"8","4":"8","lokacija":"","5":"","osnov":"vlasnistvo","6":"vlasnistvo","kat_kul":"njiva","7":"njiva"},{"ID":"135","0":"135","naziv":"ooo","1":"ooo","ha":"9","2":"9","ar":"9","3":"9","m2":"9","4":"9","lokacija":"","5":"","osnov":"vlasnistvo","6":"vlasnistvo","kat_kul":"njiva","7":"njiva"},{"ID":"136","0":"136","naziv":"ppp","1":"ppp","ha":"5","2":"5","ar":"6","3":"6","m2":"5","4":"5","lokacija":"","5":"","osnov":"vlasnistvo","6":"vlasnistvo","kat_kul":"njiva","7":"njiva"}]}

就像您看到的那樣，我在數據表中隱藏了第一列，而該值在我的數據庫中是（ID）...但是現在我需要一種獲取它的方法。 怎么樣？

我需要從單擊行的1.列中獲取數據-要獲取ID，因為我需要然后更新數據庫中的數據，並且需要單擊行的ID。 有任何想法嗎？

另外，我如何才能訪問單擊行中的所有值？ 等等

只是想法：clickedRow.data.Id，clickedRow.data.naziv等。...有什么辦法嗎？

Answer 1

這是一個簡單的示例，您可以從

http://jsfiddle.net/zy65agrt/2/

HTML

<table id="tableId">
    <tr>
        <td>
            1
        </td>
        <td>
            <button class="row-button" >show Id</button>
        </td>
    </tr>
    <tr>
        <td>
            2
        </td>
        <td>
            <button class="row-button" >show Id</button>
        </td>
    </tr>
</table>

jQuery的

$(document).ready(function(){

    $("#tableId button").click(function(){

        var trElem = $(this).closest("tr");// grabs the button's parent tr element
        var firstTd = $(trElem).children("td")[0]; //takes the first td which would have your Id
        alert($(firstTd).text())
    })

}）

單擊一行時，它將找到父tr，然后您可以在具有您的ID的那一行中獲取td。

Answer 2

您可以使用以下代碼：

var $el = $('#example');
var oTable = $el.dataTable({
    // options
});

$el.on('click', '.openDelete', function() {
    var row = $(this).closest('tr')[0];
    var rowData = oTable.row(row).data();
    if (rowData) {
        var rowId = rowData.ID;

        // Use your rowId value the way you like
    }
});

此解決方案不從DOM中讀取ID（如mattfetz的回答），而是通過使用dataTable .data()方法檢索原始數據項。 這可能更可靠，並且對實現的依賴性較小。

Answer 3

我以這種方式解決：

var oTable =  $('#example'). dataTable();
$('#example').on('click', 'tr', function(){
    var oData = oTable.fnGetData(this);
    console.log(oData.ID);
});