时间戳

首页 > 解决方案 > 我无法过滤或搜索

javascript - 我无法过滤或搜索

问题描述

我有一个大问题，我通过了最后 2 个小时。

我有这个数据表： 

const tableauAjoutCandidat = $("#tableauAjoutCandidats").DataTable({
    select: "multi",
    searching: false,
    columns: [
        {
            name: "nomPrenom",
            title: "NOM Prénom",
            data: "nom"
        },
        {
            name: "dateNaissance",
            title: "Date de naissance",
            data: "datenaissance",
            render: function(data) {
                return moment(data, 'YYYY-MM-DD').format('DD/MM/YYYY');
            }
        },
        {
            name: "besoins",
            title: "Besoins",
            data: "besoins"
        },
        {
            name: "epr",
            title: "EPR",
            data: "epr",
            render: function(data) {
                if (data == false) {
                    return '<input class="checkboxEPR" type="checkbox" value="" />';
                } else {
                    return '<input class="checkboxEPR" type="checkbox" value="" checked />';
                }
            }
        },
        {
            name: "demande",
            title: "Demande",
            data: 'demande'
        }
    ],
    ajax: {
        url: Routing.generate("exercicepratique_candidats_potentiels", {epId: epId}),
        dataSrc: 'candidats'
    },
    columnDefs: [
        { targets: 1, "type": "date-euro" },
    ]
});

在此 DataTabla 中，最后一列“需求”包含TRUEor FALSE，我想过滤以仅在TRUE未选中复选框时查看行，并在选中时查看所有行。

所以我尝试了多种方法。
首先，我尝试使用过滤器制作它，如下所示： 

tableauAjoutCandidat.column('demande:name').data().filter(function (value, index) {
    const checked = $('#filtreDemandeConvocationEP').is(':checked');
    if (!checked && value != true) {
        return false;
    }
    return true;
});

$('#filtreDemandeConvocationEP').on('change', function() {
    tableauAjoutCandidat.draw();
)};

但它根本不起作用......

然后我尝试通过搜索来实现，如下所示： 

$('#filtreDemandeConvocationEP').on('change', function() {
    const checked = $('#filtreDemandeConvocationEP').is(':checked');
    if (!checked) {
        tableauAjoutCandidat.column('demande:name').search('true').draw();
    } else {
        tableauAjoutCandidat.column('demande:name').draw();
    }
});

但结果相同...

所以现在我不知道该尝试什么......我希望有人可以帮助我。谢谢 ！

PS：对不起我的英语，因为你可以看到它不是我的母语。

标签： javascriptjquerydatatable

解决方案

您是否尝试过启用搜索？我看到你设置了 search = false。

根据他们的文档：请注意，如果您希望使用 DataTables 的搜索功能，则必须保持正确

https://datatables.net/reference/option/searching

const tableauAjoutCandidat = $("#tableauAjoutCandidats").DataTable({
    select: "multi",
    searching: true,
    columns: [
        {
            name: "nomPrenom",
            title: "NOM Prénom",
            data: "nom"
        },
        {
            name: "dateNaissance",
            title: "Date de naissance",
            data: "datenaissance",
            render: function(data) {
                return moment(data, 'YYYY-MM-DD').format('DD/MM/YYYY');
            }
        },
        {
            name: "besoins",
            title: "Besoins",
            data: "besoins"
        },
        {
            name: "epr",
            title: "EPR",
            data: "epr",
            render: function(data) {
                if (data == false) {
                    return '<input class="checkboxEPR" type="checkbox" value="" />';
                } else {
                    return '<input class="checkboxEPR" type="checkbox" value="" checked />';
                }
            }
        },
        {
            name: "demande",
            title: "Demande",
            data: 'demande'
        }
    ],
    ajax: {
        url: Routing.generate("exercicepratique_candidats_potentiels", {epId: epId}),
        dataSrc: 'candidats'
    },
    columnDefs: [
        { targets: 1, "type": "date-euro" },
    ]
});

推荐阅读