DataTables search not working properly

sanalrenk

I have code like below with inline editing function. If I remove all select option fields the search works fine, otherwise the search does not work properly.

Table structure:

<tbody>
<?php foreach ($components as $row): ?>
<tr data-komponent-id="<?= $row['komponent_id'] ?>">
<td><?= htmlspecialchars($row['komponent_id']) ?></td>
<td style="text-align: left;!important"></td>
<td>
<span class="komponent-ad-text"><?= htmlspecialchars($row['komponent_ad']) ?></span>
<input type="text" class="form-control komponent-ad-input d-none"
value="<?= htmlspecialchars($row['komponent_ad']) ?>">
</td>

            <td>
                <span class="ek-bilgi-text"><?= htmlspecialchars($row['ek_bilgi']) ?></span>
                <input type="text" class="form-control ek-bilgi-input d-none"
                       value="<?= htmlspecialchars($row['ek_bilgi']) ?>">
            </td>

            <td>
                <span class="kategori-text"><?= htmlspecialchars(explode('>', $row['tam_kategori'])[0]) ?></span>
            </td>
            <td>
                <span class="alt-kategori-text"><?= htmlspecialchars($row['tam_kategori']) ?></span>
                <select class="form-select alt-kategori-select d-none">
                    <?php foreach ($kategoriler as $kat): ?>
                        <option value="<?= $kat['id'] ?>" <?= ($kat['id'] == $row['kategori_id']) ? 'selected' : '' ?>>
                            <?= htmlspecialchars($kat['ad']) ?>
                        </option>
                    <?php endforeach; ?>
                </select>
            </td>
            <td>
                <span class="uretici-text"><?= htmlspecialchars($row['uretici_ad']) ?></span>
                <select class="form-select uretici-select d-none">
                    <?php foreach ($ureticiler as $uretici): ?>
                        <option value="<?= $uretici['id'] ?>" <?= ($uretici['id'] == $row['uretici_id']) ? 'selected' : '' ?>>
                            <?= htmlspecialchars($uretici['ad']) ?>
                        </option>
                    <?php endforeach; ?>
                </select>
            </td>
            <td>
                <span class="tedarikci-text"><?= htmlspecialchars($row['tedarikci_ad']) ?></span>
                <select class="form-select tedarikci-select d-none">
                    <?php foreach ($tedarikciler as $tedarikci): ?>
                        <option value="<?= $tedarikci['id'] ?>" <?= ($tedarikci['id'] == $row['tedarikci_id']) ? 'selected' : '' ?>>
                            <?= htmlspecialchars($tedarikci['ad']) ?>
                        </option>
                    <?php endforeach; ?>
                </select>
            </td>
            <td>
                <span class="paket-text"><?= htmlspecialchars($row['tam_paket']) ?></span>
                <select class="form-select paket-select d-none">
                    <?php foreach ($paketler as $kat): ?>
                        <option value="<?= $kat['id'] ?>" <?= ($kat['id'] == $row['paket_id']) ? 'selected' : '' ?>>
                            <?= htmlspecialchars($kat['ad']) ?>
                        </option>
                    <?php endforeach; ?>
                </select>
            </td>
            <td>
                <span class="lokasyon-text"><?= htmlspecialchars($row['tam_lokasyon']) ?></span>
                <select class="form-select lokasyon-select d-none">
                    <?php foreach ($lokasyonlar as $lokasyon): ?>
                        <option value="<?= $lokasyon['id'] ?>" <?= ($lokasyon['id'] == $row['lokasyon_id']) ? 'selected' : '' ?>>
                            <?= htmlspecialchars($lokasyon['ad']) ?>
                        </option>
                    <?php endforeach; ?>
                </select>
            </td>
            <td>
                <span class="adet-text"><?= htmlspecialchars($row['adet']) ?></span>
                <input type="text" class="form-control adet-input d-none"
                       value="<?= htmlspecialchars($row['adet']) ?>">
            </td>


        </tr>


    <?php endforeach; ?>
    </tbody>

kthorngren

Try using Orthogonal data to update the filter value of the cell with the selected option. Based off this example I built this test case:
https://live.datatables.net/rimigelo/1/edit

Kevin

kthorngren

Forgot to mention the test case uses cell().invalidate() to update the Datatables data cache with the changes.

Kevin

sanalrenk

but I didn't want to search for the titles in the option. When you click on the span, the option comes into play and when you make a selection, it hides and the span takes its place. I want to search for the title in the span, but when the option is there, the search doesn't work.

When I remove all the options, everything works fine when only the spans are there.

If you examine the code carefully, you will understand what I mean

sanalrenk

here my javascript codes:

`$(document).ready(function () {
// Menü açma/kapama fonksiyonu
function toggleMenu(selectClass, textClass) {
$(document).on("click", textClass, function () {
var select = $(this).next(selectClass);
select.removeClass("d-none");
$(this).addClass("d-none");
});

    $(document).on("change", selectClass, function () {
        var textElement = $(this).prev(textClass);
        textElement.text($(this).find(":selected").text());
        $(this).addClass("d-none");
        textElement.removeClass("d-none");
    });
}

// Genel düzenleme fonksiyonu
function makeEditable(inputClass, textClass, saveCallback) {
    $(document).on("click", textClass, function () {
        var currentText = $(this).text();
        $(this).addClass('d-none');
        $(this).siblings(inputClass).removeClass('d-none').val(currentText).focus();
    });

    $(document).on("blur", inputClass, function () {
        var newText = $(this).val();
        $(this).addClass('d-none');
        $(this).siblings(textClass).removeClass('d-none').text(newText);
        if (saveCallback) saveCallback(newText);
    });
}

// Seçenek düzenleme fonksiyonu
function makeSelectEditable(selectClass, textClass) {
    $(document).on("click", textClass, function () {
        $(this).addClass('d-none');
        $(this).siblings(selectClass).removeClass('d-none');
    });

    $(document).on("change", selectClass, function () {
        var textElement = $(this).prev(textClass);
        textElement.text($(this).find(":selected").text());
        $(this).addClass("d-none");
        textElement.removeClass("d-none");
    });
}

// Menüleri açıp kapama işlemi
[".lokasyon-select", ".alt-kategori-select", ".paket-select", ".uretici-select", ".tedarikci-select"].forEach(function (selectClass) {
    toggleMenu(selectClass, selectClass.replace("select", "text"));
});

// Menülere dışarıdan tıklayınca kapanma işlemi
$(document).on("click", function (event) {
    var selectors = ".lokasyon-text, .lokasyon-select, .alt-kategori-text, .alt-kategori-select, .paket-text, .paket-select, .uretici-text, .uretici-select, .tedarikci-text, .tedarikci-select";
    if (!$(event.target).closest(selectors).length) {
        $(".lokasyon-select, .alt-kategori-select, .paket-select, .uretici-select, .tedarikci-select").addClass("d-none");
        $(".lokasyon-text, .alt-kategori-text, .paket-text, .uretici-text, .tedarikci-text").removeClass("d-none");
    }
});

// Metin düzenleme
makeEditable('.komponent-ad-input', '.komponent-ad-text');
makeEditable('.ek-bilgi-input', '.ek-bilgi-text');
makeEditable('.adet-input', '.adet-text');

// Seçim menüleri için düzenleme
[".tedarikci-select", ".uretici-select", ".alt-kategori-select", ".lokasyon-select", ".paket-select"].forEach(function (selectClass) {
    makeSelectEditable(selectClass, selectClass.replace("select", "text"));
});

// Veri güncellenmesi (Enter tuşu veya blur ile)
$(document).on("blur keyup", ".komponent-ad-input, .ek-bilgi-input, .alt-kategori-select, .tedarikci-select, .uretici-select, .lokasyon-select, .paket-select, .adet-input", function (event) {
    if (event.type === "keyup" && event.keyCode !== 13) {
        return;
    }

    var row = $(this).closest("tr");
    var komponentId = row.data("komponent-id");

    var updatedData = {
        komponent_id: komponentId,
        komponent_ad: row.find(".komponent-ad-input").val(),
        ek_bilgi: row.find(".ek-bilgi-input").val(),
        kategori_id: row.find(".alt-kategori-select").val(),
        tedarikci_id: row.find(".tedarikci-select").val(),
        uretici_id: row.find(".uretici-select").val(),
        lokasyon_id: row.find(".lokasyon-select").val(),
        paket_id: row.find(".paket-select").val(),
        adet_id: row.find(".adet-input").val()
    };

    // Güncelleme işlemi
    updateData(updatedData, row);
});

// Veriyi güncelleme için genel AJAX fonksiyonu
function updateData(updatedData, row) {
    $.ajax({
        url: 'komponent-guncelle.php',
        type: 'POST',
        data: updatedData,
        success: function (response) {
            var data = JSON.parse(response);
            console.log(data);  // Gelen veriyi konsola yazdır

            if (data.status === 'success') {
                updateRowText(row, data.data);
            } else {
                alert(data.message);
            }
        },
        error: function (xhr, status, error) {
            console.error("Ajax Hatası: " + error);
            alert("Bir hata oluştu.");
        }
    });
}

// Satır metinlerini güncelle
function updateRowText(row, data) {
    row.find(".komponent-ad-text").text(data.komponent_ad);
    row.find(".ek-bilgi-text").text(data.ek_bilgi);
    row.find(".alt-kategori-text").text(data.tam_kategori);
    row.find(".kategori-text").text(data.kategori);
    row.find(".tedarikci-text").text(data.tedarikci_ad);
    row.find(".uretici-text").text(data.uretici_ad);
    row.find(".lokasyon-text").text(data.tam_lokasyon);
    row.find(".paket-text").text(data.tam_paket);
    row.find(".adet-text").text(data.adet);
}

// Komponent silme işlemi
$(document).on("click", ".delete-btn", function (e) {
    var row = $(this).closest("tr");
    var komponentId = row.data("komponent-id");

    if (confirm("Bu komponenti silmek istediğinizden emin misiniz?")) {
        $.ajax({
            url: "delete.php",
            method: "POST",
            data: {komponent_id: komponentId},
            success: function (response) {
                var res = JSON.parse(response);
                if (res.success) {
                    row.remove();
                    alert(res.message);
                } else {
                    alert(res.message);
                }
            },
            error: function () {
                alert("Bir hata oluştu, lütfen tekrar deneyin.");
            }
        });
    }
    e.preventDefault();
});

});
`

sanalrenk

the first state of the column is span. select is hidden.

when I click on the span title, select becomes active and I make a selection,

i select the new value

then select is hidden and span is visible

sanalrenk

**Code blocks with a select menu are as follows:
**
<td>
<span class="lokasyon-text"><?= htmlspecialchars($row['tam_lokasyon']) ?></span>
<select class="form-select lokasyon-select d-none">
<?php foreach ($lokasyonlar as $lokasyon): ?>
<option value="<?= $lokasyon['id'] ?>" <?= ($lokasyon['id'] == $row['lokasyon_id']) ? 'selected' : '' ?>>
<?= htmlspecialchars($lokasyon['ad']) ?>
</option>
<?php endforeach; ?>
</select>
</td>

If all columns are in the code structure as below, the search works properly but the select menu cannot be used.
<span class="lokasyon-text"><?= htmlspecialchars($row['tam_lokasyon']) ?></span>

kthorngren

You will probably need to do something similar. It doesn't look like you are using Datatables APIs to update the cell's content. Datatables won't know about these updates. See this FAQ for more details.

Use cell().invalidate() after updating the cell's data. You may or may not need to use columns.render with orthogonal data, like my test case, to remove the span. You posted a lot of code to try and understand. If you need help with this please build a simple test case that shows an example of your cell data so we can offer more specific suggestions.
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

Kevin