DataTables API row(). Data()

Question

Привет всем и с новым годом :) Итак, я использую библиотеку dataTables. На своем веб-сайте я нашел этот пример, где функция должна возвращать строку таблицы, которая была нажата.

var table = $('#example').DataTable(); 

$('#example tbody').on('click', 'tr', function() { 
    console.log(table.row(this).data()); 
}); 

Я пытаюсь использовать этот пример для моего кода, но у меня есть ошибки

Uncaught TypeError: aucTable.row is not a function

мой код:

var mainTable = $('#mainTable'); 
$(document).ready(function() { 
     mainTable.dataTable({ 
      'searching': false, 
      'ajax': 'assets/static_data/data.json', 
      'columns': [ 
       { 
        title: "Name", 
        data: "name" 
       }, 
       { 
        title: "Office", 
        data: "office" 
       }, 
       { 
        title: "Extn.", 
        data: "extn" 
       }, 
       { 
        title: "Salary", 
        data: "salary" 
       }, 
       { 
        title: "Start date", 
        data: "start_date" 
       }, 
       { 
        title: "Details", 
        data: null, 
        defaultContent: "<button class='details-btn btn'>More details</button>", 
        sorting: false 
       } 
      ] 
     }); 
    }); 

$('#mainTable').on('click', '.details-btn', function() { 

     var selectedRow = aucTable.row(this).data(); 
     console.log(selectedRow); 

     $("<div id='details-dialog'/>").dialog({ 
      modal: true, 
      show: true, 
      maxWidth: 620, 
      maxHeight: 300, 
      minWidth: 500, 
      minHeight: 200, 
      title: "Hello World" 
     }); 
    }); 

Может кто-нибудь сказать мне, почему у меня эта ошибка? И почему я не могу получить строку, которая была нажата?

Танки для всех. Наилучшее отношение и получать удовольствие.

Answer 1

Я не знаком с datatables, однако вы можете попробовать изменить его на следующее:

var mainTable = null; 
$(document).ready(function() { 
    mainTable = $('#mainTable').dataTable({...}); 
}); 

$('#mainTable').on('click', '.details-btn', function() { 
    var tr = $(this).closest('tr'); 
    var selectedRow = mainTable.row(tr).data(); 
    console.log(selectedRow); 
    //... 
}); 

Обратите внимание, что я хранящей результат к $('#mainTable').dataTable() вызова в переменной mainTable, так что вы можете ссылаться на это позже при вызове функции row().

Другая вещь, следует отметить, что в обработчике щелчка, похоже, вам нужно найти tr из DataTable - вызов mainTable.row(this) не дает строку, поскольку this кнопка, которая была нажата, а не строка Таблица.

См. this link для примера, похожего на то, что вы делаете.

Answer 2

В текущем коде acuTable var не существует. Таким образом, вы можете изменить свой код, чтобы иметь acuTable var, указывающий на экземпляр datatable, например:

var mainTable = $('#mainTable'); 
var acuTable; 
$(document).ready(function() { 
     acuTable = mainTable.dataTable({ 
      'searching': false, 
      'ajax': 'assets/static_data/data.json', 
      'columns': [ 
       { 
        title: "Name", 
        data: "name" 
       }, 
       { 
        title: "Office", 
        data: "office" 
       }, 
       { 
        title: "Extn.", 
        data: "extn" 
       }, 
       { 
        title: "Salary", 
        data: "salary" 
       }, 
       { 
        title: "Start date", 
        data: "start_date" 
       }, 
       { 
        title: "Details", 
        data: null, 
        defaultContent: "<button class='details-btn btn'>More details</button>", 
        sorting: false 
       } 
      ] 
     }); 
    }); 

$('#mainTable').on('click', '.details-btn', function() { 

     var selectedRow = aucTable.row(this).data(); 
     console.log(selectedRow); 

     $("<div id='details-dialog'/>").dialog({ 
      modal: true, 
      show: true, 
      maxWidth: 620, 
      maxHeight: 300, 
      minWidth: 500, 
      minHeight: 200, 
      title: "Hello World" 
     }); 
    });