数据表在最后的“下一个"中断.或任何“上一个"分页按钮 [英] DataTables break on last "Next" or any "Previous" paginate button

问题描述

我有以下数据表，该数据表调用 status_icons()函数来替换0& 1个带图标的值.

I have the following DataTable which calls status_icons() function for replacing 0 & 1 values with icons.

在第一个结果页上(在initComplete上的 )，我调用status_icons()进行替换，然后在DataTables范围之外进行触发，以便针对下一个分页结果重新执行我的函数每个分页对DataTable DOM重构的行为.

At first results page (on initComplete) I call status_icons() for the replacement and then I make a trigger out of DataTables scope in order to have my function re-executed for next paginated results due to DataTable DOM reconstruction behavor for each pagination.

我得到的错误是，当您单击任何分页或编号分页上的上一页" 按钮时，在当前图标上重新添加状态图标盒.

The error I get is that re-adds the status icons over the current ones when you you click on the "Previous" button on any pagination or the numbered pagination boxes.

我用图标替换值的功能

function status_icons() {

    $('table tr').each(function() {
        if ($(this).find('td').eq(0).text() == '1') {
            $(this).find('td').eq(0).replaceWith('<i class="fa fa-3 fa-check-circle-o datatable-paid-1"></i>');
        } else {
            $(this).find('td').eq(0).replaceWith('<i class="fa fa-3 fa-exclamation-circle datatable-paid-0"></i>');
        }
    });
}

数据表构造-在initComplete上调用第一页和第二页结果的函数

DataTable construction - on initComplete calls the function for the first and second page results

setTimeout(function() {
  $('#invoices-table').DataTable({
    responsive: true,
    columnDefs: [{ orderable: false, targets: [-1, -2, -3] }],
    dom: 'Bfrtip',  
    initComplete: function() {
      status_icons() // it executes my function for the first page of results
      var api = this.api();
      // some irrelevant code that uses api and does not cause my issue
      // ...

    }
  });
}, 1000);

jQuery事件，用于每次由于数据表重建而单击.paginate_button时执行我的函数

jQuery event for executing my function each time a .paginate_button is clicked due to DataTable reconstruction

$(document).on('click','.paginate_button', function() {
  if( !$(this).hasClass("disabled") ){
    status_icons(); // it executes for the rest paginations
  }
});

https://codepen.io/anon/pen/Wjqbbd

推荐答案

通常，它是

In general it is a really bad thing to delegate events to the document object. Furthermore, dataTables steals the click event totally, preventing you from adding additionally click event handlers to .paginate_buttons. A working event handler on a .paginate_button would be

$('body').on('mousedown','.paginate_button', function() {
  ...
})

但是，在您要实现的目标中，您的方法有些夸张或错误". dataTable有一个 columns.render 回调函数来处理这些问题.只需将其添加到您的columDefs部分:

However, your approach is somehow exaggerated or "wrong" in the context of what you want to achieve. dataTables have a columns.render callback to deal with exact those issues. Simply add this to your columDefs section :

columnDefs: [
  { orderable: false, targets: [-1, -2, -3] },
  { targets : 0, 
    render: function(data, type) {
      if (type == 'display') {
        return data == '1' 
          ? '<i class="fa fa-3 fa-check-circle-o datatable-paid-1"></i>'
          : '<i class="fa fa-3 fa-exclamation-circle datatable-paid-0"></i>'
      } else {
        return data
      }
    }
  }
],

你很好.它解决了两个问题:一个没有点击动作，一个您根本不必担心页面更改-另一个带有重复插入的字体真棒图标的问题.

And you are good. It solves both problems: The one with lack of action on click, you dont have to worry on page changes at all - and the one with replicated font awesome icons inserted over and over.

当dataTables要显示列的内容时，只需返回正确的<i>字体真棒标记即可.

It simply works by returning the correct <i> font awesome markup when dataTables want to display content for the column.

已将代码移植到jsfiddle-> http://jsfiddle.net/2tzp19se/

Have ported your code to a jsfiddle -> http://jsfiddle.net/2tzp19se/

这篇关于数据表在最后的“下一个"中断.或任何“上一个"分页按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！