web-dev-qa-db-fra.com

Tables de données jQuery: Recherche et filtrage avec la pagination Ajax

J'ai une table SQL avec 36000 entrées à afficher dans une liste de données. La pagination fonctionne bien puisque je la développe comme ceci:

var table = $('.datatable').DataTable({
    pageLength : 20,
    lengthChange : false,
    processing : true,
    serverSide : true,
    ajax : {
        url :"ajax.php",
        type: "post",
    }
});

Dans mon fichier ajax.php, je fais simplement écho à mes lignes (codées JSON), selon la limite fixée par le numéro de page.

Le problème est que le filtrage natif et la recherche ne fonctionnent plus. Lorsque je veux filtrer une colonne, la couche "Traitement" apparaît, puis disparaît mais mes données sont toujours les mêmes. Quand je veux faire des recherches sur la table, rien ne se passe.

Donc, voici mes questions :

  1. Comment restaurer la recherche et le filtrage?
  2. Comment puis-je filtrer et rechercher dans toutes les lignes (pas seulement celles qui sont affichées)? Avec Ajax, oui, mais comment à Jquery?

Merci d'avance

Edit: Merci à Abdul Rehman Sayed, j'ai réussi à faire la partie recherche. Voici ce que j'ai fait:

var table = $('.datatable').DataTable({
    pageLength : 20,
    lengthChange : false,
    processing : true,
    serverSide : true,
    ajax : {
        data : function(d) {
            d.searching = get_search($('.datatable'));
        },
        url :"ajax.php",
        type: "post",
    },
    searching : false,
});

$('.datatable thead th').each(function() {
    var title = $(this).data('name');
    $('.datatable').find('tfoot tr').append('<td><input type="text" name="'+title+'"/></td>');
});

table.columns().every(function() {
    var that = this;
    $('input', this.footer()).on('keyup', function(e) {
        that.search(this.value).draw();
    }
});

function get_search(datatable) {
    var result = [];
    datatable.find('tfoot').find('input').each(function() {
        result.Push([$(this).attr('name'), $(this).val()]);
    });
    return result;
}

Pour le filtrage, je développe un code laid:

$('.datatable').find('th').click(function() {
    var item = $(this);
    removeClasses($('.datatable'), item.index());
    if(item.hasClass('sorting_asc')) {
        item.removeClass('selected_asc').addClass('selected_desc');
    } else {
        item.removeClass('selected_desc').addClass('selected_asc');
    }
});

function get_sorting(datatable) {
    var result = false;
    datatable.find('th').each(function() {
        var item = $(this);
        var name = item.data('name');
        if(item.hasClass('selected_asc')) {
            result = name+' ASC';
        } else if(item.hasClass('selected_desc')) {
            result = name+' DESC';
        } else {
            // continue
        }
    });
    return result;
}

function removeClasses(datatable, index) {
    datatable.find('th').each(function() {
        if($(this).index() !== index) {
            $(this).removeClass().addClass('sorting');
        }
    });
}
jquerysearchdatatablesfilteringpaginate
6
Pauloscorps

Vous devrez faire toute la recherche et le filtrage côté serveur.

Pour chaque demande de recherche/filtre ou page, la table de données transmet tout cela en tant que données de formulaire à la page du serveur. Reportez-vous https://www.datatables.net/manual/server-side

Vous devrez utiliser ces données de formulaire pour filtrer/rechercher/paginer sur les enregistrements sur la table sql et les transmettre en conséquence au client.

Le datatable montre simplement ce qu'il obtient du serveur.

9
Abdul Rehman Sayed