Как получить данные строки после нажатия кнопки в таблицах данных - PullRequest
Новая
       31

Как получить данные строки после нажатия кнопки в таблицах данных

2 голосов
/ 04 августа 2020

может ли кто-нибудь помочь мне в получении данных одной строки при событии щелчка.

Это таблица, которая динамически заполняется после выполнения функции Success в вызове AJAX 

<div class="table-responsive table-wrap tableFixHead container-fluid">
<table class="table bg-violet dT-contain" id="datatable" >
    <thead class="thead-dark">
        <tr>
            <th>No.</th>
            <th>Main</th>
            <th>Shrinked</th>
            <th>Clicks</th>
            <th>Disable</th>
            <th>Delete</th>
        </tr>
    </thead>
    <tbody>
        <tr class="bg-violet">

        </tr>
    </tbody>
</table>
</div>

<script src="scripts/jquery-3.5.1.min.js"></script>
<script src="scripts/jquery.dataTables.min.js"></script>
<script src="scripts/dataTables.bootstrap4.min.js" defer></script>
<script src="scripts/dashboard.js" defer></script>

Это моя ajax функция успеха 

success: function(data){
        $('#datatable').dataTable({
        data: data,
        "autoWidth": true,
        columns: [
            {'data': 'id'},
            {'data': 'main'},
            {'data': 'shrinked'},
            {'data': 'clicks'},
            {"defaultContent": "<button id='del-btn'>Delete</button>"}
            ]
        })
    }

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

$('#datatable tbody').on( 'click', 'button', function () {
    var data = table.row( $(this).parents('tr') ).data();
    alert( data[0] );
} );

Но это, похоже, не сработало.

Данные JSON, возвращаемые из вызова AJAX, находятся в этом формат: 

[{"id":"12","main":"ndkekfnq" ...}, {.....}]

Я также добавил функцию onclick на кнопку удаления, чтобы попытаться получить данные, но это тоже не сработало.

РЕДАКТИРОВАТЬ: весь AJAX запрос 

$(document).ready(()=>{
$.ajax({
    url: 'URL',
    method: 'post',
    dataType: 'json',
    data: {
        "email": window.email,
        "token": window.token
    },
    success: function(data){
        let table = $('#datatable').dataTable({
        data: data,
        "autoWidth": true,
        columns: [
                {'data': 'id'},
                {'data': 'main'},
                {'data': 'shrinked'},
                {'data': 'clicks'},
                {"defaultContent": "<button id='dis-btn' class='btn btn-warning'>Disable</button>"},
                {"defaultContent": "<button id='del-btn' class='btn btn-danger'>Delete</button>"}
            ]
        })
        $('#datatable tbody').on('click', "#del-btn", function() {
            let row = $(this).parents('tr')[0];
            //for row data
            console.log(table.row(row).data().id);
        });
    }
})

})

Как правильно это сделать? Спасибо

Ответы [ 3 ]

2 голосов
/ 04 августа 2020

Вам нужно использовать column.render вместо defaultContent, а затем получить данные из внешней функции, вам нужно отобразить кнопку при визуализации таблицы: 

    <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link
      rel="stylesheet"
      href="https://cdn.datatables.net/1.10.21/css/jquery.dataTables.min.css"
    />
    <script src="https://code.jquery.com/jquery-3.5.1.js"></script>
    <script src="https://cdn.datatables.net/1.10.21/js/jquery.dataTables.min.js"></script>
  </head>
  <body>
    <div class="table-responsive table-wrap tableFixHead container-fluid">
        <table class="table bg-violet dT-contain" id="datatable" >
            <thead class="thead-dark">
                <tr>
                    <th>No.</th>
                    <th>Main</th>
                    <th>Shrinked</th>
                    <th>Clicks</th>
                    <th>Delete</th>
                </tr>
            </thead>
            <tbody>
                <tr class="bg-violet">
        
                </tr>
            </tbody>
        </table>
    <script>
      $('#datatable').dataTable( {
            "data": [{'id':20,'main':'hola','shrinked':false,'clicks':2000},{'id':21,'main':'hola','shrinked':false,'clicks':283000}],
            "autoWidth": true,
            "columns": [ 
                {"data": "id"},        
                {'data': 'main'},
                {'data': 'shrinked'},
                {'data': 'clicks'},
                {"data": "id",
                    "render": function ( data, type, row, meta ) { 
                        return '<button data-id="'+data+'" onclick="deleteThis(event)">Delete</button>'
                        }
                }
                
             ]
        } )

function deleteThis(e){
  console.log(e.target.getAttribute('data-id'))
}
    </script>
  </body>
</html>

Не пробовал, но на основе документов Datatables это должно сработать, дайте мне знать, сработало ли это.

2 голосов
/ 04 августа 2020

Вот вам рабочий код. Вам нужно установить datatables в var.

Используйте этот var table, чтобы найти clicked row, который будет $(this).parents('tr')[0] и использовать .data.id для элемента, на который щелкнули id

Я воссоздал ваш пример и отлично работает. Просто установите ajax ответ на data.

Демо 

//Ajax Data
var data = [{
  "id": "10",
  "main": "ndkekfnq",
  "shrinked": "ndkekfnq",
  "clicks": "ndkekfnq"
}, {
  "id": "12",
  "main": "Something",
  "shrinked": "Data",
  "clicks": "Ha"
}]

//Data Table
var table = $('#datatable').DataTable({
  data: data,
  columns: [{
      'data': 'id'
    },
    {
      'data': 'main'
    },
    {
      'data': 'shrinked'
    },
    {
      'data': 'clicks'
    },
    {
      "defaultContent": "<button id='del-btn'>Delete</button>"
    }
  ]
});


$('#datatable tbody').on('click', "#del-btn", function() {
  var row = $(this).parents('tr')[0];
  //for row data
  console.log(table.row(row).data().id);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.21/js/jquery.dataTables.min.js" integrity="sha512-BkpSL20WETFylMrcirBahHfSnY++H2O1W+UnEEO4yNIl+jI2+zowyoGJpbtk6bx97fBXf++WJHSSK2MV4ghPcg==" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.21/css/jquery.dataTables.min.css" integrity="sha512-1k7mWiTNoyx2XtmI96o+hdjP8nn0f3Z2N4oF/9ZZRgijyV4omsKOXEnqL1gKQNPy2MTSP9rIEWGcH/CInulptA==" crossorigin="anonymous" />
<div class="table-responsive table-wrap tableFixHead container-fluid">
  <table class="table bg-violet dT-contain" id="datatable">
    <thead class="thead-dark">
      <tr>
        <th>No.</th>
        <th>Main</th>
        <th>Shrinked</th>
        <th>Clicks</th>
        <th>Delete</th>
      </tr>
    </thead>
    <tbody>
      <tr class="bg-violet">

      </tr>
    </tbody>
  </table>
1 голос
/ 04 августа 2020

@ Ответ Хавьера - очень хороший способ решить проблему с OP. Другой способ, если вы не хотите включать поле id дважды, будет примерно так: 

"columns": [ 
            {"data": "id"},        
            {'data': 'main'},
            {'data': 'shrinked'},
            {'data': 'clicks'},
            {"data": null,
                "render": function ( data, type, row, meta ) { 
                    return '<button data-id="' + data.id + '" onclick="deleteThis(event)">Delete</button>'
                    }
            }
         ]
...