jQuery DataTables: Как добавить класс к <tr>, если строка существует в <td>?

Question

Я использую jQuery DataTables для отображения нужных мне данных.Строка таблицы будет меняться в зависимости от данных.Когда пользователь нажимает на строку, строка будет выбрана.Моя таблица перезагружается с помощью ajax.reload().Проблема в том, что при перезагрузке таблицы выбранная строка становится невыбранной.

Я создал код, который, когда пользователь нажимает <tr>, меняет цвет фона.Идентификатор строки затем сохраняется в переменной.После перезагрузки DataTable я использую contains(), чтобы проверить, существует ли идентификатор в таблице, затем попробуйте добавить класс, который указывает, что он выбран.

Мой HTML:

<table id="messageDt" class="table table-no-bordered table-hover display" cellspacing="0" width="100%" style="width:100%">
    <thead>
        <tr>
            <th>Contact</th>
            <th>Messages</th>
            <th>Date Received</th>
            <th>Message Status</th>
            <th>Port ID</th>
            <th>Has Read</th>
            <th>Assigned To</th>
        </tr>
    </thead>
</table>

DataTableкод инициализации:

var convoTable = $('#messageDt').DataTable({
        "dom": 'lfrtip',
        "responsive": true,
        "bPaginate": true,
        "bLengthChange": false,
        "scrollCollapse": true,
        "order": [2, 'desc'],
        "stripeClasses": [],
        select: true,
        "ajax": "smsSenders.json",
        "aoColumns": [{
                "mData": function (data, type, dataToSet) {
                    var contactName = data.contactName;
                    var sender = data.sender;

                    if (contactName === null) {
                        if (sender.length > 20) {
                            return sender.substr(0, 20) + '...';
                        } else {
                            return sender.substr(0, 20);
                        }
                    } else {
                        if (contactName.length > 20) {
                            return contactName.substr(0, 20) + '...';
                        } else {
                            return contactName.substr(0, 20);
                        }
                    }
                }
            }, {
                "mData": function (data, type, dataToSet) {
                    var contentM = data.content;
                    if (contentM === null) {
                        return contentM = "     ";
                    } else {
                        contentM = data.content;
                        if (contentM.length > 30) {
                            return contentM.substr(0, 30) + '...';
                        } else {
                            return contentM.substr(0, 30);
                        }
                    }

                }
            }, {
                "mData": "receiveTime"
            }, {
                "mData": "messageStatus"
            }, {
                "mData": "portId"
            }, {
                "mData": "hasRead"
            }, {
                "mData": "isAssignedToTicket",
                "fnCreatedCell": function (nTd, sData, oData, iRow, iCol) {
                    if (oData.isAssignedToTicket === null) {
                        $(nTd).html("<p>None</p>");
                    } else {
                        $(nTd).html("<a class='linkColor' href='${pageContext.request.contextPath}/cnr/viewEditTicket?ticketNumber=" + oData.isAssignedToTicket + "'>" + oData.isAssignedToTicket + "</a>");
                    }
                }
            }
        ],
        "createdRow": function (row, data, dataIndex) {
            if (data.hasRead === "0") {
                $(row).addClass('noRead');
            } else {
                $(row).addClass('yesRead');
            }
            if (data.messageStatus == "0") {
                $(row).addClass('messageNotSent');
            }
        },

        language: {
            "search": "_INPUT_",
            searchPlaceholder: "Search message"
        }

    });
$('[rel="tooltip"]').tooltip();
convoTable.column(3).visible(false);
convoTable.column(4).visible(false);
convoTable.column(5).visible(false);

Обработчик щелчка строк:

$('#messageDt tbody').on('click', 'tr', function () {
    if ($(this).hasClass('isSelected')) {
        $(this).removeClass('isSelected');
    } else {
        $('#messageDt tr.isSelected').removeClass('isSelected');
        $(this).addClass('isSelected');
    }
    var currentRow = $(this).closest("tr");
    var data = $('#messageDt').DataTable().row(currentRow).data();
    var sender = encodeURIComponent(data['sender']);
    senderTmp = data['sender'];
    var contactName = data['contactName'];
    contactNameTmp = contactName;
    portIdTmp = data['portId'];
    messageIdTmp = data['messageId'];
    var dateR = data['receiveTime'];
    var smsc = data['smsc'];
    contentTmp = data['content'];
    typeOfMessageTmp = data['typeOfMessage'];
    convoIndex = $(this).index();
    var portId = data['portId'];
    if (contactName === null) {
        $('#convoTitle').text("Conversation with " + data['sender']);
    } else {
        $('#convoTitle').text("Conversation with " + data['contactName'] + "(" + data['sender'] + ")");
    }

    $("#conversationDt").DataTable().ajax.url("getConversation.json?&sender=" + sender + "&portId=" + portId);
    $('#conversationDt').DataTable().ajax.reload();

    $('#replyMessageDiv').removeClass("hidden");
    $('#replyButtonDiv').removeClass("hidden");

});

Перезагрузка данных таблицы:

setInterval(function () {
    convoTable.ajax.reload(null, false); // user paging is not reset on reload
    if (messageIdTmp !== null) {
        if ($('#messageDt tbody > tr:contains(' + messageIdTmp + ')')) {
            console.log("EXISTS");
            $(this).addClass('isSelected');
        }
    }
}, 2000);

Я также пробовал это:

$('#messageDt tbody > tr:contains('+messageIdTmp+')').addClass('isSelected')

Когда я делаю:

if (messageIdTmp !== null) {
    if ($('#messageDt tbody > tr:contains(' + messageIdTmp + ')')) {
        console.log("EXISTS");
        $(this).addClass('isSelected');
    }
}

Или

$('#messageDt tbody > tr:contains('+messageIdTmp+')').addClass('isSelected')

класс isSelected не назначен.

Мне нужно сохранить isSelectedкласс даже после ajax.reload()

Answer 1

Я бы предложил:

• имеет глобальную переменную, в которой хранятся идентификаторы выбранных строк;
• используйте createdRow возможность повторно применить «выбранный» класс при перерисовке таблицы (вызвано .ajax.reload();
• вместе с манипуляцией с «выбранным» классом для перемещения / удаления идентификатора выбранной строки в / из глобального массива;

Следующий код демонстрирует этот подход, также вы можете найти полномасштабную демонстрацию над здесь , или вы можете проверить это с помощью Инструментов разработчика в вашем браузере по этой ссылке

//global variable that stores selected row id's
const selectedRowIds = [];
//datatable initialization
const dataTable = $('#mytable').DataTable({
        dom: 't',
        ajax: {
            url: '/getdata',
            type: 'POST',
            dataSrc: ''
        },
        columns: [{
                title: 'id',
                data: 'id'
            }, {
                title: 'item',
                data: 'item'
            }
        ],
        //re-apply class 'selected' upon table redraw
        createdRow: (row, data, dataIndex, cells) => {
            if (selectedRowIds.indexOf(data.id) > -1)
                $(row).addClass('selected');
        }
    });
//emulate selection
$('#mytable').on('click', 'td', function () {
    //get clicked table row node
    const clickedRow = dataTable.row($(this).closest('tr'));
    //append/remove selected row 'id' property value to global array
    if ($(clickedRow.node()).hasClass('selected')) {
        selectedRowIds.splice(selectedRowIds.indexOf(clickedRow.data().id), 1);
        console.log(selectedRowIds);
    } else {
        selectedRowIds.push(clickedRow.data().id);
    }
    //toggle class 'selected' upon clicking the row
    $(clickedRow.node()).toggleClass('selected');
});
//button that triggers '.ajax.reload()'
$('#reload').on('click', () => dataTable.ajax.reload());