Редактировать и удалять при наведении курсора на jQuery Datatable

Я пытаюсь показать кнопки редактирования и удаления при наведении курсора на tr в jQuery Datatable. В процессе я почти закончил, но я определил 3-й столбец, чтобы он содержал кнопки редактирования и удаления.

Ниже приведен код html и jQuery.

<table id="example" class="display" cellspacing="0" width="100%">
   <thead>
      <tr>
         <th>Name</th>
         <th>Position</th>
         <th></th>
      </tr>
   </thead>
   <tbody>
      <tr>
         <td>Tiger Nixon</td>
         <td>System Architect</td>
         <td></td>
         <!-- <td>Extra td</td> -->
      </tr>
      <tr>
         <td>Garrett Winters</td>
         <td>Accountant</td>
         <td></td>
         <!-- <td>Tokyo</td> -->
      </tr>
      <tr>
         <td>Ashton Cox</td>
         <td>Junior Technical Author</td>
         <td></td>
         <!-- <td>San Francisco</td> -->
      </tr>
      <tr>
         <td>Cedric Kelly</td>
         <td>Senior Javascript Developer</td>
         <td></td>
         <!-- <td>Edinburgh</td> -->
      </tr>
   </tbody>
</table>

jQuery/JS-код

var trIndex = null;
 $("#example tr td").mouseenter(function() {
     trIndex = $(this).parent();
     $(trIndex).find("td:last-child").html('<a href="">Edit</a>&nbsp;&nbsp;<a href="">Delete</a>');
 });

 // remove button on tr mouseleave

 $("#example tr td").mouseleave(function() {
     $(trIndex).find('td:last-child').html("&nbsp;");
 });

На скриншоте ниже представлен мой вывод. введите здесь описание изображения

Похоже, что операции редактирования и удаления предназначены для второго столбца td. Я хотел бы сделать это как в приведенном ниже примере, в котором не отображается столбец для редактирования и удаления, более того, они выглядят так, как будто они находятся за пределами таблицы введите здесь описание изображения


jquery css datatables jquery-datatables-editor
person srk    schedule 17.06.2015    source источник
comment
Что вы подразумеваете под дополнительной колонкой? Я прочитал два раза и чувствую, что вам нужно дать нам некоторые дополнительные сведения.   -  person Adib Aroui    schedule 17.06.2015

Ответы (1)


arrow_upward
2
arrow_downward

Размещение кнопки редактирования/удаления за пределами таблицы было бы проблемой. Поскольку методы mouseenter/mouseleave предназначены для таблицы, если мышь находится над кнопкой редактирования/удаления, это будет рассматриваться как выход из мыши для таблицы, и кнопки вообще никогда не будут видны.

Вместо этого создайте столбец для кнопки редактирования/удаления и настройте его так, чтобы он выглядел так, как будто он находится за пределами таблицы.

Вы можете определить, как должен выглядеть последний столбец, с помощью опции columnDefs. Что-то вроде этого, может быть

var myTable = $('#example').DataTable({
    "columnDefs": [{ "targets": [2], "orderable": false, width: '20%', "sClass": 'options' }]
});

Приведенный выше фрагмент кода установит ширину, удалит значок сортировки над объявлением и добавит класс options для последнего столбца.

Вам нужен CSS, чтобы он выглядел так, как будто он находится за пределами таблицы. Ниже должно быть сделано это

#example{
    border-bottom: none;
}
#example tr:last-child td:not(.options){ /* <---- options will be the class for last column */
    border-bottom: 1px solid;
}
#example .options{
    background: white;
    border: none;
}

Вот демонстрация http://jsfiddle.net/dhirajbodicherla/189Lp6u6/7/

person Dhiraj    schedule 17.06.2015