Установка атрибута id для таблиц данных 1.10.11 ‹tr›

Я использую таблицы данных 1.10.11.

Согласно документации, я могу установить rowId, используя следующий синтаксис:

$('#myTable').DataTable( { rowId: 'staffId' } );

Я не создаю данные с помощью Ajax. У меня есть два текстовых поля и кнопка «Добавить» с левой стороны и одно с данными с правой стороны. Когда я нажимаю «Добавить», в таблицу данных добавляется новая строка. Я надеюсь, что в этом есть смысл.

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

Согласно документации, эта функция доступна начиная с DataTables 1.10.8.

Кто-нибудь решил эту проблему? Любая помощь будет оценена.

Спасибо.


javascript jquery datatables datatables-1.10
person Neelkanth Kaushik    schedule 09.06.2016    source источник
comment
Вы пробовали...? Назначьте уникальный атрибут из источника JSON/AJAX, это должно быть так. Если у вас есть уникальный _id во всех ваших строках, то rowId: '_id' ...   -  person davidkonrad    schedule 09.06.2016
comment
Я не создаю данные с помощью Ajax. У меня есть два текстовых поля и кнопка «Добавить» слева и один с данными справа. Когда я нажимаю «Добавить», в таблицу данных добавляется новая строка. Я надеюсь, что в этом есть смысл.   -  person Neelkanth Kaushik    schedule 09.06.2016
comment
Я редактирую вопрос, чтобы добавить свой сценарий к вопросу.   -  person Neelkanth Kaushik    schedule 09.06.2016

Ответы (1)


arrow_upward
0
arrow_downward

Для добавления идентификатора к элементу tr вы можете использовать rowId и указать столбец, содержащий ваш идентификатор.

$('#myTable').DataTable(
{
  columns: [
     {data:"staffId"},//Remember specified the column
     {data:"position"},
     {data:"office"},
     {data:"age"},
     {data:"date"},
     {data:"salary"}
  ],
  rowId: 'staffId' //Reference to column data
});

Для добавления кнопки вы должны создать объект и добавить его в таблицу, используя row.add и draw для отображения в вашей таблице, например:

$("#btnAdd").on("click",function(){

    var rowID = $("#rowId").val();//Get value of TextBox

    var new_object = { 
                       staffId: rowID, //New rowId
                       position: 'Developer', 
                       office: "Peru", 
                       age: 25, 
                       date: "2016/03/25", 
                       salary: "$ 58.200" 
                     };

  myTable.row.add(
      new_object
  ).draw();

});

Результат: https://jsfiddle.net/cmedina/7kfmyw6x/65/< /а>

person CMedina    schedule 09.06.2016