Как получить скрытый идентификатор для удаления записи в jQuery Datatable - PullRequest
Новая
       35

Как получить скрытый идентификатор для удаления записи в jQuery Datatable

0 голосов
/ 05 апреля 2019

В моей таблице данных jQuery есть кнопки «Изменить» и «Удалить». Первый столбец является столбцом идентификатора записи и скрыт. У меня есть обработчики событий для кнопок «Редактировать» и «Удалить». Стоит ли использовать обработчик событий для функции щелчка и tr в DataTable для получения идентификатора или, если я использую обработчики событий кнопки (предпочтительно), как я могу получить идентификатор из строки? то есть определить, по какой строке щелкнули? 

 const dataTable = $('#personTable').DataTable({
        data: serializedObject,
        columns: [
            { data: 'ID', 'visible': false},  
            { data: 'TitleCode' },
            { data: 'TitleDetail' },
            { data: 'FirstName' },
            { data: 'LastName' },
            {data: null}
        ],
        columnDefs: [
            {
                targets: 8, 
                data: 'ID',  //'<div class="btn-group" style="width:70px"> <button type="button"' +
                defaultContent: '<div class="floatRightClass" >' +
                        '<a class="btn btn-default glyphicon glyphicon-pencil btn-edit" title="Edit"> </a>' +
                        '<a class="btn btn-default glyphicon glyphicon-trash btn-delete" title="Delete"> </a>' +
                    '</div>'
            },

        ]
    });

    $(".btn-delete").click(function (e)
    {
        var dtTable = $('#personTable').DataTable();
        var selectedRows = dtTable.rows('tr.selected');

        var id = selectedRows.data().toArray().map(function (row) { return row.id });
        console.log("id= " + ID);

        // or
        console.log("id= " + dataTable.rows('tr.selected').data().toArray().map(function(row){return row.ID}));


        // This works, but the row index is hardcoded
        alert("..." + dtTable.cells({ row: 0, column: 0 }).data()[0]);

        // Error: undefined
        selectedIndex = dtTable.row(this).data()[0];
        alert("Id = " + selectedIndex.ID);

    });

   $('#personTable tbody').on('click', '.btn-delete', function ()
    {
        var tr = $(this).closest("tr");
        var rowindex = tr.index();

        alert("rowindex " + rowindex);

        // Get the value of the ID in the hidden column (col: 0)
        alert("..." + dataTable.cells({ row: rowindex, column: 0 }).data()[0]);
    });

Ответы [ 2 ]

2 голосов
/ 05 апреля 2019

Я бы предложил следующий подход.

Здесь необходимо использовать метод rows().remove() (вам не нужно иметь идентификаторы записей, которые вы хотите удалить).

Однако, если вы также хотите удалить эти записи из своего внутреннего хранилища, вы можете сделать что-то вроде: 

$('#delete').on('click', function() {
    const selectedRows = dataTable.rows('tr.selected');
    $.ajax(/* throw selected rows data (or particular properties) using selectedRows.data() */);
    selectedRows.remove().draw();
});


//source data
const srcData = [
  {id: 1, name: 'Steve Rogers', title: 'Captain America'},
  {id: 2, name: 'Anthony Stark', title: 'Iron Man'},
  {id: 3, name: 'Peter Parker', title: 'Spider Man'},
  {id: 4, name: 'Bruce Banner', title: 'Halk'},
  {id: 5, name: 'Thor Odinsson', title: 'Thor'}
];
//data table initialization
const dataTable = $('#mytable').DataTable({
  data: srcData,
  dom: 't',
  columns: [
    {data: 'id', visible: false},
    {data: 'name', title: 'Name'},
	//append 'Edit'/'Delete' buttons to the rightmost edge of the cell
    {data: 'title', title: 'Title', render: cellData => cellData+'<button class="delete">Delete</button><button class="edit">Edit</button>'}
  ]
});
//delete button handler
$('#mytable').on('click', '.delete', function () {
	//grab parent <tr> node of the button, use it as 
	//a selector to throw its id into message and 
	//delete corresponding dataTable row
	const currentRow = dataTable.row($(this).closest('tr'));
	$('#msg').text(`Row id ${currentRow.data().id} (${currentRow.data().title}) was removed`);
	currentRow.remove().draw();
});
//edit button handler
$('#mytable').on('click', '.edit', function(){
	$(this).closest('tr').toggleClass('editing');
	if($(this).closest('tr').hasClass('editing')) {
		//turn each table cell into input field
		[...$(this).closest('tr').find('td')].forEach(function(td, colindex){
			$(td).html(`<input value="${dataTable.cell(td).data()}"></input> ${colindex==this.length-1?'<button class="delete">Delete</button><button class="edit">Edit</button>':''}`)
		}, $(this).closest('tr').find('td'));
	}
	else {
		//grab input fields from within each cell and 
		//put their values into corresponding dataTable cell
		[...$(this).closest('tr').find('td')].forEach(function(td, colindex){
			const cellValue = $(td).find('input').val();
			dataTable.cell(td).data(cellValue);
			$(td).html(`${cellValue}${colindex==this.length-1?'<button class="delete">Delete</button><button class="edit">Edit</button>':''}`);
		}, $(this).closest('tr').find('td'));
		dataTable.draw();
	}
});
td button {
 display: block;
 float: right;
}
<!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="mytable"></table>
<div id="msg"></div>
</body>
</html>
1 голос
/ 05 апреля 2019

Используя $('#personTable tbody').on('click', '.btn-edit2', function (), я могу получить индекс строки и значение скрытой ячейки orID для использования в serverSide - Db - Processing.

...