web-dev-qa-db-fra.com

Recharger la requête Ajax avec de nouveaux paramètres

J'obtiens des données de table à partir de la base de données via la demande AJAX. Et je dois changer le paramètre de données dans la demande AJAX et actualiser la table.

Je rafraîchis la table avec la commande

$('#table1').DataTable().ajax.reload();

J'ai le code suivant

$('#table1').DataTable({

    /* SERVER SIDE PROCESSING */
                "serverSide": true,
                "ajax":
                    {
                        "url": "Home/Search",
                        "type": "POST",

                        "data": {
                            'searchType': GetSearchType(),
                            'searchText': GetSearchText()
                            //'searchType': $.mynamespace.searchType
                            //'searchText': $.mynamespace.searchText
                            //'searchType': localStorage.getItem("searchType"),
                            //'searchText': localStorage.getItem("searchText"),
                        }
                    }
            });

Mais après le rechargement de AJAX, la demande d'origine au serveur est envoyée et les nouvelles valeurs de paramètre sont ignorées. J'ai essayé de transmettre les données à la demande via la fonction, la variable globale et le stockage du navigateur, mais aucune des méthodes ne fonctionne. Sur Internet, je trouve une solution avec 

aoData.Push()

fonctionne mais je ne sais pas comment l'utiliser.

Ma version de jQuery DataTables est 1.10.7.

J'ai aussi essayé de détruire et de recréer la table avec ce code:

$('#table1').DataTable({
        "ajax":
            {
                "url": "Home/Search",
                "type": "POST",

                "data": {
                    'searchType': GetSearchType(),
                    'searchText': GetSearchText()
                }
            },
        "destroy" : true
    }).ajax.reload();

mais je reçois un message d'erreur:

Avertissement DataTables: id_table = table1 - Erreur Ajax ( http://www.datatables.net/manual/tech-notes/7 )

Le dictionnaire de paramètres contient une entrée null pour le paramètre 'draw' de type non nullable 'System.Int32'

jquerydatatables
8
Muflix

Vous pouvez utiliser function comme valeur pour ajax.data comme indiqué ci-dessous. 

De cette façon, votre code sera exécuté à chaque fois que le client demande au serveur et non pas une fois comme avec votre code initial.

$('#table1').DataTable({
   "serverSide": true,
   "ajax": {
      "url": "Home/Search",
      "type": "POST",
      "data": function(d){
         d.searchType = GetSearchType();
         d.searchText = GetSearchText();
      }
   }
});

Utilisez ensuite $('#table1').DataTable().ajax.reload() lorsque vous devez recharger la table ou $('#table1').DataTable().ajax.reload(null, false) si vous ne souhaitez pas réinitialiser la page en cours. Voir ajax.reload() pour plus d'informations.

20
Gyrocode.com

Voici comment je l'accomplis:

var onSearchClick = function () { chercher(); };

    var search = function () {


        var startDate =  $('#datetimepicker1').find("input").val();
        var endDate = $('#datetimepicker2').find("input").val();

        $.ajax({
            type: "GET",
            url: "/api/getByDate?startDate=" + startDate + "&endDate="+endDate,
            datatype: "json",
            traditional: true
        })
        .done(function (data) {

          var table = $('#data-table-1').DataTable({
              data: data.data,
              destroy: true,
              "columns": [
             { "data": "id" },
             { "data": "id2" },
             { "data": "id3" }
              ],
              "columnDefs": [
           {
               "targets": [1],
               "visible": false,
               "searchable": false
           },
            {
                "targets": [2],
                "visible": false,
                "searchable": false
            }],
              "sPaginationType": "full_numbers"
          });
      });
    };
1
Sanchitos

Okay j'ai trouvé la solution, dans la réinitialisation de la table, il est nécessaire de spécifier à nouveau tous les paramètres sinon ils sont pris de défaut. donc le code final est

$('#table1').DataTable({
            "iDisplayStart": 0,
            "iDisplayLength": 50,
            "bPaginate": true,
            "bSort": false,
            "serverSide": true,
             /* and all others settings others than default */
        "ajax":
            {
                "url": "Home/Search",
                "type": "POST",

                "data": {
                    'searchType': GetSearchType(),
                    'searchText': GetSearchText()
                }
            },
        "destroy" : true  /* <---- this setting reinitialize the table */
    }).

mais si quelqu'un trouvera une meilleure solution, merci de la partager.

1
Muflix