jQuery DataTables: как подавить модальные детали строки при нажатии кнопок строки? - PullRequest
Новая
       8

jQuery DataTables: как подавить модальные детали строки при нажатии кнопок строки?

0 голосов
/ 27 июня 2019

У меня есть таблица данных, с помощью которой при нажатии <tr> я получаю значения и вместе с ними показываю подробную информацию о каждой строке, но у меня есть 3 последних столбца, в которых есть кнопки, и каждый раз, когда я нажимаю кнопку, чтобы отобразить модальныйBootstrap также показывает мне подробную информацию о строке, и я должен закрыть этот мод, чтобы увидеть модальное значение кнопки

Я пытался получить значение столбца по-разному, но те, которые я нашел наИнтернет выбирает td, и оттуда они получают индекс, но мое событие щелчка происходит от <tr>, поэтому проблема 

$('#mobis_table tbody').on('click', 'tr', function() {
  var col = $(this).find('td')
  for (var i = 0; i < col.length; i++) {
    console.log(col[i]._DT_CellIndex.column)
  }

  if (col <= 9) {

    var data = table.row(this).data();
    var id = data.id
    $.ajaxSetup({
        headers: {
          'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        }
      }
    });
});

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

Ответы [ 3 ]

0 голосов
/ 27 июня 2019

Как я понял, ваша проблема: когда вы нажимаете кнопку в строке таблицы, событие click всплывает вниз по событию клика, вызывающему DOM для строки (отображать детали строки).Если это так, вы можете просто сделать event.stopPropagation() в обработчике нажатия кнопки: 

//random source data
const srcData = [
  {item: 'apple', cat: 'fruit'},
  {item: 'pear', cat: 'fruit'},
  {item: 'cucumber', cat: 'vegie'}
];

//initialize datatables
const table = $('#example').DataTable({
  data: srcData,
  dom: 't',
  columns: ['item', 'cat'].map(header => ({title: header, data: header})),
  columnDefs: [{targets: 1, render: data => data+'<button class="good">Good button</button><button class="bad">Bad button</button>'}]
});

//emulate row click handler to display row details
$('#example').on('click', 'tr', function(){
  const rowDetails = table.row(this).data();
  console.log(rowDetails);
});

//BAD button click handler
$('#example').on('click', '.bad', function(){
  console.log('Bad button was clicked');
});

//GOOD button click handler
$('#example').on('click', '.good', function(event){
  event.stopPropagation();
  console.log('Good button was clicked');
});
tbody button {
  display: block;
  float: right;
  margin: 5px;
}
<!doctype html>
<html>
<head>
  <script type="application/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
  <script type="application/javascript" src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
  <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css">
</head>
	<body>
		<table id="example"></table>
	</body>
</html>
0 голосов
/ 27 июня 2019

Сначала я должен был удалить тело из события щелчка tr, чтобы даже нажатие кнопки перезаписало событие. 

$('#mobis_table').on('click', 'tr', function () {

Затем просто добавьте event.stopPropagation (); в функциях моих кнопок. 

$("#mobis_table").on('click', '.move-mobi', function(event){
  event.preventDefault();
  event.stopPropagation();
0 голосов
/ 27 июня 2019

Используйте index() с this.Получите общую длину tr, используя find и length, как показано ниже.После получения общей длины вы можете легко найти последние 3 или нет с помощью index. 

$('#mobis_table').on('click', 'tr', function() {
  var len = $('#mobis_table').find('tr').length; // You can get total tr length here and add your logic for last 3 columns.
  var num = $(this).index();
  console.log(num);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id='mobis_table'>
  <tr>
    <td>1</td>
  </tr>
  <tr>
    <td>2</td>
  </tr>
  <tr>
    <td>3</td>
  </tr>
</table>

Или, если вы нажали td и хотите tr, используйте индекс closest(): 

$(this).closest("tr").index();
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...