Вероятно, это одна из самых распространенных ошибок / проблем DataTables. Фактически настолько, что это второй "самый распространенный FAQ" DataTables. Процитируем Аллана из FAQ по DataTables:

В: Мои мероприятия не работают на второй странице

A. При присоединении событий к ячейкам в таблице, управляемой DataTables, нужно быть осторожным, как это делается. Поскольку DataTables удаляет узлы из модели DOM, события, применяемые с помощью статического прослушивателя событий, могут не иметь возможности связываться со всеми узлами в таблице. Чтобы преодолеть это, просто используйте параметры делегированного прослушивателя событий jQuery, как показано в этом примере.

Я бы рекомендовал взглянуть на этот пример страницы, но чтобы резюмировать то, что в нем говорится: поскольку DataTables добавляет и удаляет строки из DOM по мере необходимости, события могут завершаться ошибкой, особенно на страницах после первой (поскольку они не были на странице при загрузке событий кнопки DataTables).

Чтобы решить эту проблему, используйте прослушиватель событий JQuery on для событий строки. Вы можете использовать вызов DataTables row().data() для получения данных для выбранной / нажатой строки. В вашем случае это, вероятно, будет выглядеть примерно так:

$('#table').on('click', 'tr', function () {
    var data = table.row( this ).data();

    $("#dialog").dialog({
        resizable: false,
        show: {
            effect: "bounce",
            duration: 500
        },
        hide: {
            effect: "explode",
            duration: 500
        },
        height: 100,
        modal: true,
        buttons: {
            "Button 1": function () {
                window.open("http://www.example.com/" + "firstRoute" + "/" + data('key').dataCode, "_blank");
            },
            "Button 2": function () {
                window.open("http://www.example.com/" + "secondRoute" + "/" + data('key').dataCode, "_blank");
            }
        }
    });
});

В качестве побочного примечания, есть ли причина, по которой вы добавляете класс CSS в каждую строку только для вызова событий, а не просто прикрепляете события к самим строкам, как в этом примере?

В качестве альтернативы вы можете добавить прослушиватель событий в саму таблицу:

$('#table').on("click", ".cssClass", function(){
    var self = this;
    $("#dialog").dialog({
        resizable: false,
        show: {
            effect: "bounce",
            duration: 500
        },
        hide: {
            effect: "explode",
            duration: 500
        },
        height: 100,
        modal: true,
        buttons: {
            "Button 1": function () {
                var data = $(self).data('key');
                window.open("http://www.example.com/" + "firstRoute" + "/" + data.dataCode, "_blank");
            },
            "Button 2": function () {
                var data = $(self).data('key');
                window.open("http://www.example.com/" + "secondRoute" + "/" + data.dataCode, "_blank");
            }
        }
    });
});

Класс cssClass доступен для jQuery только на первой странице, последующие ячейки еще не находятся в DOM, поэтому к ним не будет прикреплен прослушиватель событий. Надеюсь, это поможет.

Кажется, перерисовать таблицу данных. Так что вам нужно снова связать событие click с функцией. Сначала назначьте свою таблицу данных переменной. Нравится:

var dt = $('#table').DataTable({
    bAutoWidth: false,
    stateSave: true
});

Затем привяжите событие draw и переместите код привязки клика в функцию обратного вызова. Нравится:

dt.on('draw', function() {
   $(".cssClass").click(function () {
       // The callback function.
   });
});

Ссылка: https://datatables.net/manual/events

Например, вам нужно указать идентификатор родительского элемента

$("#example").on("click", "a.cssClass", function () {})