Comment faire pour réinitialiser la pagination dans un JQuery datatables

J'ai un JQuery datatable qui charge des données via une requête ajax. Il y a un formulaire par la table qui permet à l'utilisateur de filtrer les résultats sur le serveur. Lorsque l'utilisateur modifie le formulaire de filtre, je l'appelle fnReloadAjax() avec le nouveau filtre de données, et la table redessine avec le nouveau, les résultats filtrés.

Le problème que j'ai est que la pagination des bâtons, même si le tableau n'a plus suffisamment d'éléments pour atteindre la page en cours. Si le tableau avait à l'origine de 20 articles, et l'utilisateur est sur la page 2 (10 articles par page), et ils changent le filtre de façon à seulement 5 articles sont retournés, le tableau n'affiche pas les éléments et montre ce au fond:

Showing 11 to 5 of 5 entries

Il est toujours à la page 2, même si il ya suffisamment de données pour une page.

J'ai trouvé de nombreux messages au sujet d'essayer de préserver la page en cours/en ligne, mais aucun montrant un moyen simple de réinitialiser la pagination de la première page. Quelle est la façon la plus simple de faire cela?

Voici une version simplifiée de mon code pour plus de clarté:

$("#mytable").dataTable({
    bStateSave: false,
    fnServerData: function (sSource, aoData, fnCallback) {
        return $.ajax({
            type: "POST",
            url: url,
            data: {filter: filterValue}
        });
    }
});

$("#myForm").submit(function(e) {
    table.fnReloadAjax();
    return false;
});

OriginalL'auteur JMB | 2013-09-04

  1. 3

    Vous pourriez explicitement de passer à la première page après rechargement, voir http://datatables.net/api#fnPageChange

    $("#myForm").submit(function(e) {
    table.fnPageChange(0);
    table.fnReloadAjax();
    return false;
});
    Ah oui, c'est la fonction que je cherchais. Cependant, j'ai dû changer de page en premier pour éviter les problèmes de synchronisation avec le retour de l'appel ajax, afin de mettre la table.fnPageChange(0) avant le tableau.fnReloadAjax(). Merci!
    Heureux, il a travaillé, j'ai édité ma réponse de travailler comme vous l'avez dit.
    Le problème de cette solution est-elle envoyer des deux demande. L'un pour la modification de la page et un autre pour recharger les données.

    OriginalL'auteur Gigo

  2. 1

    Cela peut être résolu en mettant en œuvre les fonctions de sauvegarder et de charger l'état de la table de données et réinitialiser le point de départ - l'exemple ci-dessous

     "fnStateSave": function (oSettings, oData) {  
  localStorage.setItem( 'MyDataTable', JSON.stringify(oData) ); 
   },
  "fnStateLoad": function (oSettings) {
      var settings = JSON.parse( localStorage.getItem('MyDataTable') );
      settings.iStart = 0;  //resets to first page of results
      return settings
  },

    Comme fnStateLoad est appelée lorsque la table est rechargée - par exemple, un nouveau filtre est appliqué - la pagination est remise à zéro au début.

    fnStateSave est appelée à chaque fois que vous récupérez de la page de résultats suivante

    Cette approche permet d'éviter la surcharge d'une requête vers le serveur

    OriginalL'auteur RPG II

  3. 0

    Accepter la solution donnée par @Gigo:

    $("#myForm").submit(function(e) {
    table.fnPageChange(0);
    table.fnReloadAjax();
    return false;
});

    Cela a un problème, il envoie deux requêtes au serveur.

    j'ai trouvé que le fnPageChange t-il à la première fois.

    $("#myForm").submit(function(e) {
    table.fnPageChange(0);
    return false;
});

    OriginalL'auteur workdreamer