Search code examples
datatableswordpress-rest-api

Datatables on same page

I have defined 2 separate restAPI responses on the same page, and they output the proper values & datatables once called separateley, but the call to the second datable fails. Below the jQuery code I have been using:

<script type="application/javascript">
    var site_url='http://www.my-wp-site'
    var post_object='posts'
    var page_object='pages'
</script>

And my main script (datatable definitions are more or less duplicates, for readability...):

(function() {

var retrieved_object=post_object
var plural='articles';
var singular='l\'article'
var singular2= 'article'
var table= $('.posts_table')
var table_wrapper=$('#posts_table_wrapper')

// sending the ajax request for Posts
$.ajax( {
    url: site_url+'/wp-json/wp/v2/'+retrieved_object,
    method: 'GET',
    timeout: 0,

    success: function( retrieved_object ) {
        // post container element
        table.show();
        table.DataTable( {
            data: retrieved_object,
            fnServerData: fnDataTablesPipeline,
            columns: [
                {data:'title.rendered'},
                {data:'link', render: function (dataField) { return '<a href="' + dataField + '"  target="_blank" class="text-decoration-none">Action</a>'; } }
            ],
            responsive:true,
            pagingType: "full_numbers",
            language:{
                "sEmptyTable":     "Aucune donnée disponible dans le tableau",
                "sInfo":           "Affichage de "+singular+" _START_ à _END_ sur _TOTAL_ "+plural,
                "sInfoEmpty":      "Affichage de "+singular+" 0 à 0 sur 0 "+plural,
                "sInfoFiltered":   "(filtré à partir de _MAX_ "+plural+" au total)",
                "sInfoPostFix":    "",
                "sInfoThousands":  ",",
                "sLengthMenu":     "Afficher _MENU_ "+plural,
                "sLoadingRecords": "Chargement...",
                "sProcessing":     "Traitement...",
                "sSearch":         "",
                "sSearchPlaceholder":"Votre recherche...",
                "sZeroRecords":    "Aucun "+singular2+" correspondant trouvé",
                "oPaginate": {
                    "sFirst":    "&nbsp;<span class=\"text-decoration-none;\"><i class=\"fa fa-fast-backward\"></i></span>&nbsp; ",
                    "sLast":     "&nbsp;<span class=\"text-decoration-none;\"><i class=\"fa fa-fast-forward\"></i></span>&nbsp;",
                    "sNext":     "&nbsp;<span class=\"text-decoration-none;\"><i class=\"fa fa-chevron-right\"></i></span>&nbsp;",
                    "sPrevious": "&nbsp;<span class=\"text-decoration-none;\"><i class=\"fa fa-chevron-left\"></i></span>&nbsp;"
                },
                "oAria": {
                    "sSortAscending":  ": activer pour trier la colonne par ordre croissant",
                    "sSortDescending": ": activer pour trier la colonne par ordre décroissant"
                },
                "select": {
                    "rows": {
                        "_": "%d lignes sélectionnées",
                        "0": "Aucune ligne sélectionnée",
                        "1": "1 ligne sélectionnée"
                    }
                }
            }
        } );

    },
    error:function(){table_wrapper.html('Il n\'y a pas de Pages / Articles...')}
} );

    var retrieved_object=page_object
    var plural='pages';
    var singular='la page'
    var singular2= 'page'
    var table= $('.pages_table')
    var table_wrapper=$('#pages_table_wrapper')

// sending the ajax request for pages
$.ajax( {
    url: site_url+'/wp-json/wp/v2/'+retrieved_object,
    method: 'GET',
    timeout: 0,

    success: function( retrieved_object ) {
        // post container element
        table.show();
        table.DataTable( {
            data: retrieved_object,

            columns: [
                {data:'title.rendered'},
                {data:'link', render: function (dataField) { return '<a href="' + dataField + '"  target="_blank" class="text-decoration-none">Action</a>'; } }
            ],
            responsive:true,
            pagingType: "full_numbers",
            language:{
                "sEmptyTable":     "Aucune donnée disponible dans le tableau",
                "sInfo":           "Affichage de "+singular+" _START_ à _END_ sur _TOTAL_ "+plural,
                "sInfoEmpty":      "Affichage de "+singular+" 0 à 0 sur 0 "+plural,
                "sInfoFiltered":   "(filtré à partir de _MAX_ "+plural+" au total)",
                "sInfoPostFix":    "",
                "sInfoThousands":  ",",
                "sLengthMenu":     "Afficher _MENU_ "+plural,
                "sLoadingRecords": "Chargement...",
                "sProcessing":     "Traitement...",
                "sSearch":         "",
                "sSearchPlaceholder":"Votre recherche...",
                "sZeroRecords":    "Aucun "+singular2+" correspondant trouvé",
                "oPaginate": {
                    "sFirst":    "&nbsp;<span class=\"text-decoration-none;\"><i class=\"fa fa-fast-backward\"></i></span>&nbsp; ",
                    "sLast":     "&nbsp;<span class=\"text-decoration-none;\"><i class=\"fa fa-fast-forward\"></i></span>&nbsp;",
                    "sNext":     "&nbsp;<span class=\"text-decoration-none;\"><i class=\"fa fa-chevron-right\"></i></span>&nbsp;",
                    "sPrevious": "&nbsp;<span class=\"text-decoration-none;\"><i class=\"fa fa-chevron-left\"></i></span>&nbsp;"
                },
                "oAria": {
                    "sSortAscending":  ": activer pour trier la colonne par ordre croissant",
                    "sSortDescending": ": activer pour trier la colonne par ordre décroissant"
                },
                "select": {
                    "rows": {
                        "_": "%d lignes sélectionnées",
                        "0": "Aucune ligne sélectionnée",
                        "1": "1 ligne sélectionnée"
                    }
                }
            }
        } );

    },
    error:function(){table_wrapper.html('Il n\'y a pas de Pages / Articles...')}
} );})();
Solution

  • You overall mistake is to use the same named global variables for both tables.

    Ajax call is asynchronous, workflow is the following:

    1. First block of variable definitions
    2. First Ajax call
    3. Second block of variable definitions
    4. Second Ajax call
    5. One of Ajax success functions
    6. Another of Ajax success functions

    As you can see, at a time of Ajax success functions execution, your global variables have values defined by the second block.

    You have several ways to avoid that, for example:

    1. Rename variables in the second block to be different from the first block:
    var retrieved_object=post_object
var plural='articles';
var singular='l\'article'
var singular2= 'article'
var table= $('.posts_table')
var table_wrapper=$('#posts_table_wrapper')

var retrieved_object2=page_object
var plural2='pages';
var singular2='la page'
var singular22= 'page'
var table2= $('.pages_table')
var table_wrapper2=$('#pages_table_wrapper')
    1. Enclose global variables into a function call:
    var createTable = function(retrieved_object, plural, singular, singular2, table, table_wrapper) {
  // sending the ajax request
  $.ajax( {
      url: site_url+'/wp-json/wp/v2/'+retrieved_object,
      method: 'GET',
      timeout: 0,

      success: function( retrieved_object ) {
          // post container element
          table.show();
          table.DataTable( {
              data: retrieved_object,
              fnServerData: fnDataTablesPipeline,
              columns: [
                  {data:'title.rendered'},
                  {data:'link', render: function (dataField) { return '<a href="' + dataField + '"  target="_blank" class="text-decoration-none">Action</a>'; } }
              ],
              responsive:true,
              pagingType: "full_numbers",
              language:{
                  "sEmptyTable":     "Aucune donnée disponible dans le tableau",
                  "sInfo":           "Affichage de "+singular+" _START_ à _END_ sur _TOTAL_ "+plural,
                  "sInfoEmpty":      "Affichage de "+singular+" 0 à 0 sur 0 "+plural,
                  "sInfoFiltered":   "(filtré à partir de _MAX_ "+plural+" au total)",
                  "sInfoPostFix":    "",
                  "sInfoThousands":  ",",
                  "sLengthMenu":     "Afficher _MENU_ "+plural,
                  "sLoadingRecords": "Chargement...",
                  "sProcessing":     "Traitement...",
                  "sSearch":         "",
                  "sSearchPlaceholder":"Votre recherche...",
                  "sZeroRecords":    "Aucun "+singular2+" correspondant trouvé",
                  "oPaginate": {
                      "sFirst":    "&nbsp;<span class=\"text-decoration-none;\"><i class=\"fa fa-fast-backward\"></i></span>&nbsp; ",
                      "sLast":     "&nbsp;<span class=\"text-decoration-none;\"><i class=\"fa fa-fast-forward\"></i></span>&nbsp;",
                      "sNext":     "&nbsp;<span class=\"text-decoration-none;\"><i class=\"fa fa-chevron-right\"></i></span>&nbsp;",
                      "sPrevious": "&nbsp;<span class=\"text-decoration-none;\"><i class=\"fa fa-chevron-left\"></i></span>&nbsp;"
                  },
                  "oAria": {
                      "sSortAscending":  ": activer pour trier la colonne par ordre croissant",
                      "sSortDescending": ": activer pour trier la colonne par ordre décroissant"
                  },
                  "select": {
                      "rows": {
                          "_": "%d lignes sélectionnées",
                          "0": "Aucune ligne sélectionnée",
                          "1": "1 ligne sélectionnée"
                      }
                  }
              }
          } );

      },
      error:function(){table_wrapper.html('Il n\'y a pas de Pages / Articles...')}
  } );
}

createTable(post_object, 'articles', 'l\'article', 'article', $('.posts_table'), $('#posts_table_wrapper'));

createTable(page_object, 'pages', 'la page', 'page', $('.pages_table'), $('#pages_table_wrapper'));