web-dev-qa-db-fra.com

Tables de données - Comment charger uniquement un certain nombre de lignes lors du chargement des pages?

J'ai un violon qui fait un ajax à URL et rend un tableau, mais je veux différer et charger seulement 10 lignes pendant chargement de la page.

HTML

<table id="example" class="display" cellspacing="0" width="100%">
    <thead>
        <tr>
            <th>Account ID</th>
            <th>Name</th>
            <th>Email</th>
        </tr>
    </thead>
</table>

JS

$(document).ready(function() {

$('#example').DataTable( {
        "bPaginate": true,
        "processing": true,
        "bServerSide": true,

        ajax: {
            url: 'https://api.myjson.com/bins/1egsx',
            dataSrc: 'data'
        },
        columns: [
            { data: 'account_id' },
            { data: 'name' },
            { data: 'email' }
        ],
        "deferRender": true,
        "deferLoading": 10,

    } );

});

Je n'arrêtais pas de

Aucun enregistrements correspondants trouvés

javascriptjqueryhtmldatatables
12
cyber8200

TL; DR: Vous devriez probablement utiliser soit deferRender avec le traitement côté client [~ # ~] ou [ ~ # ~] traitement côté serveur sans deferRender (en corrigeant vos données JSON). Cette réponse suppose que vous souhaitez un traitement côté serveur.

deferLoading

Lorsque vous utilisez correctement le traitement côté serveur, le comportement par défaut consiste à envoyer uniquement le nombre de lignes sur une page par demande ajax. Vous ne devriez pas avoir besoin d'utiliser deferLoading - voici ce que cela fait (de documentation ici ):

Lorsque vous utilisez le traitement côté serveur, le mode de fonctionnement par défaut de DataTables consiste à simplement jeter toutes les données qui existent actuellement dans la table et à demander au serveur d'obtenir la première page de données à afficher. C'est très bien pour un tableau vide, mais si vous avez déjà la première page de données affichée en HTML brut, c'est un gaspillage de ressources. En tant que telle, cette option existe pour vous permettre de demander à DataTables de ne pas faire cette demande initiale, mais plutôt d'utiliser les données déjà sur la page (aucun tri, etc. ne lui sera appliqué).

Étant donné que toutes vos données proviennent d'ajax, cette option ne doit pas être sélectionnée.

deferRender

Vous ne devriez vraiment pas non plus avoir besoin d'utiliser deferRender si vous utilisez correctement le traitement côté serveur. deferRender (à partir de son documentation ici ):

À titre d'exemple pour illustrer cela, si vous chargez un ensemble de données avec 10000 lignes, mais une longueur d'affichage de pagination de seulement 10 enregistrements, plutôt que de créer les 10000 lignes, lorsque le rendu différé est activé, DataTables n'en créera que 10.

Notez la phrase importante ici:

si vous chargez un ensemble de données avec 10 000 lignes

Si vous utilisez correctement le traitement côté serveur, vous ne devez charger le nombre de lignes par page qu'en un seul chargement. deferRender est vraiment une option pour accélérer les tables de données lors de l'utilisation du traitement côté client. Le traitement côté serveur gère déjà ce que fait deferRender. Voir cette image dans les DataTables FAQ pour savoir comment accélérer les tables de données:

enter image description here

Notez qu'il met l'accent sur deferRender pour le côté client uniquement. Une remarque à faire ici est que si vous n'avez pas beaucoup de lignes (des dizaines de milliers +), vous n'avez probablement pas besoin d'utiliser le traitement côté serveur.

Utilisation correcte du traitement côté serveur:

Votre problème vient probablement du fait que votre API ne renvoie pas la forme appropriée de JSON pour le traitement côté serveur; vous devez envoyer plus d'informations que les seules données à afficher. Voici la page de documentation avec la description complète (vous devriez certainement la lire), mais je vais essayer de décrire les bases ci-dessous.

Demande

La demande envoyée à votre API va contenir des données que vous devez traiter.

draw est un identifiant unique qui suit les ensembles de paires requête-réponse; la valeur de la réponse doit correspondre à la valeur de la demande. C'est ainsi que les tables de données font correspondre les demandes aux réponses.

start représente l'enregistrement qui devrait être le premier dans la réponse; si nous affichons 10 enregistrements par page et que nous sommes à la page 2, start sera égal à 10, de sorte que dans la réponse, nous n'enverrons que des enregistrements numérotés 10-19.

length représente le nombre attendu de lignes pour ce tirage, donc dans l'exemple ci-dessus de 10 enregistrements par page à la page 2, length sera égal à 10. Voici le nombre d'enregistrements que vous devez renvoyer . Cette valeur sera basée sur les options lengthMenu ou pageLength pour l'initialisation des tables de données. (Documenté ici et ici , respectivement)

Une chose importante à retenir qui est souvent oubliée est d'envoyer SEULEMENT autant de lignes que length; n'envoyez pas toutes vos lignes dans la première demande.

Réponse

Votre réponse devra également être modifiée. Fondamentalement, au lieu de simplement retourner data, vous devez renvoyer un objet qui ressemble à l'exemple ci-dessous (à partir de cela page de documentation ):

{
    "draw": 1,
    "recordsTotal": 57,
    "recordsFiltered": 57,
    "data": [
        [
            "Angelica",
            "Ramos",
            "System Architect",
            "London",
            "9th Oct 09",
            "$2,875"
        ],
        [
            "Ashton",
            "Cox",
            "Technical Author",
            "San Francisco",
            "12th Jan 09",
            "$4,800"
        ],
        ...
    ]
}

Notez les données supplémentaires: draw, recordsTotal et recordsFiltered en plus de l'habituel data. Ce sont des options obligatoires lors de l'utilisation du traitement côté serveur.

draw représente le nombre correspondant à la demande faite à votre API; la demande GET aura également une valeur draw, et la valeur dans le GET doit correspondre à la valeur dans la réponse.

recordsTotal représente le nombre total d'enregistrements dans le tableau, sur toutes les pages, où recordsFiltered représente le nombre d'enregistrements qui répondent aux exigences de filtrage définies par la demande GET (s'il n'y a pas de filtrage, il doit être égal à recordsTotal.

Ce sont les éléments minimum requis pour votre réponse, mais vous devriez consulter la documentation liée pour plus d'informations sur les valeurs facultatives.

Note latérale

En remarque; bServerSide doit être serverSide et bPaginate doit être paging si vous utilisez DataTables version 1.10 ou ultérieure.

8
Chris H.

Vous pouvez également le faire avec iDisplayLength:

$('#example').DataTable( {
        "aLengthMenu": [[5, 10, 15, -1], [5, 10, 15, "All"]],
        "iDisplayLength": 10,
        "bPaginate": true,
        "processing": true,
        "bServerSide": true,

        ajax: {
            url: 'https://api.myjson.com/bins/1egsx',
            dataSrc: 'data'
        },
        columns: [
            { data: 'account_id' },
            { data: 'name' },
            { data: 'email' }
        ],

    } );
4
Sanzeeb Aryal

Je suppose que votre intention ici est d'afficher le DataTable dès que la page se charge. Voici deux façons de charger des données partielles en fonction de vos besoins. Les données entières peuvent être chargées à un moment ultérieur en déclenchant un événement comme un clic sur un bouton. Dans les deux cas, la totalité des données sera également téléchargée et stockée localement qui pourra ensuite être chargée en fonction de l'événement déclenché afin d'éviter de faire un autre appel pour récupérer la totalité des données.

Cas 1: Vous souhaitez uniquement télécharger des données partielles à partir de la source

Toutes les données seront extraites de ' https://api.myjson.com/bins/1egsx ' avant que le DataTable ne traite les données. Si vous ne souhaitez extraire que des données partielles de l'URL, vous pouvez créer votre fonction personnalisée qui analysera les données en AJAX mode interactif (readyState = 3), arrêtez-vous après avoir reçu les 10 premières entrées et puis massez les données et passez-les comme données d'entrée pour le DataTable. Voici un résumé de ce que vous devez faire

var inputData = '';
function loadDataTablePreview() {
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 3 && this.status == 200) {
        inputData += this.responseText;
        // Count the number of closing '}'. If its 10, lets start processing our data
        // Get the index of 10 closing '}'
        // Create a substring of inputData
        // append ']}'
        // Now JSON Decode
        var decodedData = JSON.parse(inputData);
        // Now create an instance of the DataTable passing this data as the input data 
        $('#example').DataTable( {
          "bPaginate": true,
          "processing": true,
          "bServerSide": true,
          data: decodedData,
          columns: [
            { data: 'account_id' },
            { data: 'name' },
            { data: 'email' }
          ],
        });
    }
    else if (this.readyState == 4 && this.status == 200) {
       // JSON Decode the data and store it to load later
    }
  };
  xhttp.open("GET", "https://api.myjson.com/bins/1egsx", true);
  xhttp.send();
}

$(document).ready(function() {
  loadDataTablePreview();
}

Cas 2: ne chargez les 10 premières entrées qu'après avoir téléchargé des données entières

En supposant que vous êtes prêt à télécharger l'intégralité des données, avant d'afficher le DataTable, vous pouvez créer une fonction pour votre dataSrc comme indiqué ci-dessous. Cela n'affichera que les 10 entrées du tableau. Vous pouvez éventuellement stocker l'intégralité du JSON dans cette fonction dans le magasin de données du navigateur (comme sessionStorage), puis déclencher une fonction JS pour charger l'intégralité du JSON ultérieurement.

$(document).ready(function() {

  $('#example').DataTable( {
    "bPaginate": true,
    "processing": true,
    "bServerSide": true,
    ajax: {
        url: 'https://api.myjson.com/bins/1egsx',
        dataSrc: function ( json ) {
                    // Store entire data in sessionStorage
                    // return the first 10 entries only for now
                    return json.data.slice(0,10);
                 },
    },
    columns: [
        { data: 'account_id' },
        { data: 'name' },
        { data: 'email' }
    ],
  });
});
2
Raghav Tandon