Блог

Я использую плагин datatable на веб-сайте. Обычно у меня есть только 1 datatable на страницу, но на специальном дисплее у меня есть 2 datable.

На самом деле у меня есть этот код

 var oTable = $('.datatable').dataTable({
    'sPaginationType':'full_numbers',
    "iDisplayLength": 50,
    "oLanguage": {
        "sUrl": "js/locales/dataTables.french.txt"
    }
});

/* Add a click handler to the rows - this could be used as a callback */
$(".delete-ajax").click(function(event) {
    event.preventDefault();
    var answer = confirm("Supprimer l'élément ?")
    if (answer){
    var loading = $('.loading-notification');
    loading.removeClass('hidden');
        $(oTable.fnSettings().aoData).each(function (){
            $(this.nTr).removeClass('row_selected');
        });
        $(event.target).parents('tr').addClass('row_selected');
        var url = $(this).attr('href');
        var id = $(this).attr('data-ajax');
        var anSelected = fnGetSelected( oTable );
        $.ajax({
            type: "POST",
            url: url,
        data: "delete=trueamp;id="  id,
        async : true,
        success: function(msg) {
            loading.addClass('hidden');
            oTable.fnDeleteRow( anSelected[0] );
            }
        });
    }
});
/* Get the rows which are currently selected */
function fnGetSelected( oTableLocal ){
    var aReturn = new Array();
var aTrs = oTableLocal.fnGetNodes();
for ( var i=0 ; i<aTrs.length ; i   ){
    if ( $(aTrs[i]).hasClass('row_selected') ){
        aReturn.push( aTrs[i] );
    }
}
return aReturn;
}
  

Этот код хорошо работает, когда у меня есть только 1 datatable, но когда у меня есть больше, я получаю в своей консоли :

 k is undefined
[Stopper sur une erreur]   h=a._iDisplayEnd;if(a.oFeatures.bServe...push(a.aoOpenRows[k].nTr)}}else{d[0]= 
  

Есть идеи о том, как решить эту проблему?

Вот как вы можете удалить строку в таблице (независимо от количества таблиц на странице)

Я получил две таблицы на одной странице

Я не уверен в том, насколько хорош идентификатор, который вы дали таблице, но если это «.datatable», то:

Добавьте эту функцию на свою страницу

 $(".datatable tbody").delegate("tr", "click", function () {
    var iPos = oTable.fnGetPosition(this);
    if (iPos !== null) {
        oTable.fnDeleteRow(iPos);//delete row
    }
});
  

Я просто делюсь тем, как я это сделал.

 $(".delete-ajax").click(function(){
 var row = $(this).closest("tr").get(0);
 //ajax code goes here to delete row in the database
    $.ajax({
        type: "POST",
        url: url,
    data: "delete=trueamp;id="  id,
    async : true,
    success: function(msg) {
          loading.addClass('hidden');
          oTable.fnDeleteRow(oTable.fnGetPosition(row));
        }
    });
}
  

ОБНОВЛЕНИЕ: DataTable v1.10
Теперь я использую:

 var row = $(this).closest("tr");
oTable.row(row).remove().draw();
  

Более подробную информацию смотрите:https://datatables.net/reference/api/row ().remove()