web-dev-qa-db-fra.com

Comment effectuer un filtrage personnalisé avec Datatables et un traitement côté serveur

J'utilise Datatables pour afficher des données tabulaires dans mon application Web et je les ai configurées pour utiliser le traitement côté serveur , c'est-à-dire interroger le serveur via AJAX pour obtenir des données filtrées. Je souhaite filtrer en fonction de paramètres supplémentaires propres à mon application, c'est-à-dire correspondant à certaines options utilisateur (par exemple, via une case à cocher dans l'interface utilisateur). Comment faire en sorte que DataTables transmette ces paramètres de filtre supplémentaires au serveur?

jquerydatatables
13
aknuds1

La solution consiste à utiliser l'option fnServerParams de DataTables, qui vous permet d'ajouter des paramètres personnalisés à envoyer dans le XMLHttpRequest envoyé au serveur. Par exemple:

$(document).ready(function() {
  $('#example').dataTable({
    "bProcessing": true,
    "bServerSide": true,
    "sAjaxSource": "/IndexXhr",
    "fnServerParams": function (aoData) {
        var includeUsuallyIgnored = $("#include-checkbox").is(":checked");
        aoData.Push({name: "includeUsuallyIgnored", value: includeUsuallyIgnored});
    }
  });
});
15
aknuds1

Cette réponse est mise à jour pour la version 1.10.6  

Ceci est maintenant possible avec l’option ajax . 

Exemple de code

 $table.dataTable({
            "ajax":  {
                "url": "example.com/GetData",
                "type": "POST",
                "data": function(d) {
                    d.Foo = "bar";
                    d.Bar = "foo";
                    d.FooBar = "foobarz";
                }
            },
            "serverSide":true,
        });

Foo, Bar et FooBar seront affichés en tant que données de formulaire en tant que paramètres supplémentaires, ainsi que d’autres paramètres existants tels que dessiner, début, longueur, etc. afin que, en fonction de la langue de votre serveur, vous puissiez les lire en conséquence.

Dans un scénario réel, vous auriez probablement un bouton de recherche et une entrée, vous pouvez déclencher le processus de filtrage en appelant 

        var table = $table.DataTable();
        table.ajax.reload();

lorsque le bouton est cliqué.

16
Quannt

Enfin fait après des heures passées!

Je vais poster la méthode complète ici pour aider tout le monde.

Il faut utiliser l'option fnServerParams, qui permet d'ajouter des paramètres personnalisés dans la requête XMLHttpRequest envoyée au serveur. Par exemple:

Voici le coffescript que j'ai utilisé:

jQuery ->
  table = $('#logs').dataTable
    bProcessing: true
    bServerSide: true
    sAjaxSource: $('#logs').data('source')
    fnServerParams: (aoData) ->
      applicationName = $("#applicationName").val()
      aoData.Push
        name: "applicationName"
        value: applicationName

      return

  $("#applicationName").on "change", ->
    table.fnDraw()
    return

Mon fichier HTML contient l'élément d'entrée avec l'ID applicationName. Notez l’élément fnDraw() que j’ai utilisé pour activer la demande de mise à jour chaque fois que la valeur d’entrée change.

4
Peeyush

Cela a fonctionné pour moi 

$(document).ready(function() {
     table = $('#okmorders').DataTable( {
        // "ajax": 'http://cdpaha2.dev/admin/organizations/okm_orders'
				serverSide: true,
				"paging":   true,
				"searching":  false ,
        // "info":     false,
        "bLengthChange": false,
        // "iDisplayLength":50,
        // "aaSorting": [],
        // "oLanguage": { "sEmptyTable": "No orders present " } ,
        "aoColumnDefs" : [
          { 'bSortable' : false, 'aTargets' : [ 6 ]}
				],

			// 	"fnServerParams": function (aoData) {
			// 		 aoData.Push({name: "includeUsuallyIgnored"});
			//  },
				ajax: {
		        url: 'yoururl.json' ,
		        type: 'POST',
						data:
						{
							'startDate':function(){return $("#startDate").val(); },
							'endDate': function(){return $("#endDate").val(); } ,
							'placedBy':function(){return $("#placedBy").val(); },
							'customer_po': function(){return $("#customer_po").val(); } ,
							'customer_ref': function(){return $("#customer_ref").val(); }
						}
    },
    } );

0
Shridhar U Patil

Paramètre dynamique, celui-ci fonctionne pour moi, semble la meilleure solution

t = $("#tbl_SearchCustomer").DataTable({
    processing: true,
    serverSide: true,
    info: true,
    ajax: {
        url: '../Data/SearchCustomer',
        data: function (data) {
            data.CustomerCategoryID = $("#CustomerCategoryID").val(); // dynamic parameter
            delete data.columns;
        }
    },
    deferRender: true,
    columns: [
        { "data": "FullName" },            
    ],       
    dom: 'lfrtip'
});
0
Arun Prasad E S