同一页上的数据表

问题描述 投票：0回答：1

我在同一页面上定义了2个单独的restAPI响应，它们曾经输出正确的值和数据表，一次称为septley，但是对第二个datable的调用失败。在我一直使用的jQuery代码下面：

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

和我的主脚本（数据表定义或多或少都是重复的，以提高可读性...：

(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...')}
} );})();
datatables wordpress-rest-api
1个回答
0
投票

您的总体错误是在两个表中使用相同的命名全局变量。

Ajax调用是异步的，工作流程如下：

  1. 变量定义的第一块
  2. 首次Ajax呼叫
  3. 第二个变量定义块
  4. 第二个Ajax调用
  5. Ajax成功功能之一
  6. 另一个Ajax成功功能

您可以看到，在执行Ajax成功函数时，全局变量的值由第二个块定义。

您有几种避免这种情况的方法，例如：

  1. 将第二个块中的变量重命名为不同于第一个块：
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. 将全局变量包含在函数调用中：
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'));
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.