Datatables 同一页上的数据表_Datatables_Wordpress Rest Api

Datatables 同一页上的数据表

datatables

Datatables 同一页上的数据表,datatables,wordpress-rest-api,Datatables,Wordpress Rest Api,我在同一个页面上定义了两个独立的restAPI响应，它们输出正确的值&一旦调用separateley，就会输出正确的数据表，但是对第二个数据表的调用失败。下面是我一直使用的jQuery代码： <script type="application/javascript"> var site_url='http://www.my-wp-site' var post_object='posts' var page_object='pages' </script&

我在同一个页面上定义了两个独立的restAPI响应，它们输出正确的值&一旦调用separateley，就会输出正确的数据表，但是对第二个数据表的调用失败。下面是我一直使用的jQuery代码：

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


var site\u url=http://www.my-wp-site'
var post_object='posts'
var page_object='pages'

和我的主脚本（为了可读性，数据表定义或多或少都是重复的…）：

（函数（）{
检索到的变量\u对象=后\u对象
var复数形式为“条款”；
var singular='l'物品'
var Singular 2=‘article’
变量表=$（'.posts_表'）
var table_wrapper=$（“#posts_table_wrapper”）
//发送ajax帖子请求
$.ajax（{
url:site_url+'/wp json/wp/v2/'+检索到的_对象，
方法：“GET”，
超时：0，
成功：函数（检索到的对象）{
//邮政集装箱要素
table.show（）；
表.数据表（{
数据：检索到的\u对象，
fnServerData:fnDataTablesPipeline，
栏目：[
{data:'title.rendered'}，
{data:'link'，render:function（数据字段）{return'；}
],
回答：是的，
pagingType:“完整编号”，
语言：{
“sEmptyTable”：“有争议的画面”，
“sInfo”：“Affichage de”+单数+开始+结束+总计+复数，
“sInfoEmpty”：“Affichage de”+单数+0á0 sur 0”+复数，
“sInfoFiltered”：（过滤部分+复数+总计），
“sInfoPostFix”：“，
“信佛千”：“，”，
“长菜单”：“粘贴菜单”+复数，
“sLoadingRecords”：“收费…”，
“sProcessing”：“叛徒……”，
“搜索”：“搜索”，
“sSearchPlaceholder”：“Votre recherche…”，
“sZeroRecords”：“Aucun”+singular2+“correspondant trouvé”，
“oPaginate”：{
“第一项”：“第三项”，
“sLast”：“，
“sNext”：“，
“以前的”：”
},
“奥里亚”：{
“Soot上升”：“：Acter倒TIER La Calnon Par Orde牛角包”，
“SofftDelEnguts:”：牛角包
},
“选择”：{
“行”：{
“uu”：“%d对齐选择”，
“0”：“Aucune ligne séselectionée”，
“1”：“1路线选择”
}
}
}
} );
},
错误：function（）{table_wrapper.html（'Il n'y a pas de Pages/Articles…'）}
} );
检索到的变量\u对象=页面\u对象
var复数为='pages'；
var singular='la page'
var singular2='第页'
变量表=$（'.pages_表'）
var table_wrapper=$（“#pages_table_wrapper”）
//发送页面的ajax请求
$.ajax（{
url:site_url+'/wp json/wp/v2/'+检索到的_对象，
方法：“GET”，
超时：0，
成功：函数（检索到的对象）{
//邮政集装箱要素
table.show（）；
表.数据表（{
数据：检索到的\u对象，
栏目：[
{data:'title.rendered'}，
{data:'link'，render:function（数据字段）{return'；}
],
回答：是的，
pagingType:“完整编号”，
语言：{
“sEmptyTable”：“有争议的画面”，
“sInfo”：“Affichage de”+单数+开始+结束+总计+复数，
“sInfoEmpty”：“Affichage de”+单数+0á0 sur 0”+复数，
“sInfoFiltered”：（过滤部分+复数+总计），
“sInfoPostFix”：“，
“信佛千”：“，”，
“长菜单”：“粘贴菜单”+复数，
“sLoadingRecords”：“收费…”，
“sProcessing”：“叛徒……”，
“搜索”：“搜索”，
“sSearchPlaceholder”：“Votre recherche…”，
“sZeroRecords”：“Aucun”+singular2+“correspondant trouvé”，
“oPaginate”：{
“第一项”：“第三项”，
“sLast”：“，
“sNext”：“，
“以前的”：”
},
“奥里亚”：{
“Soot上升”：“：Acter倒TIER La Calnon Par Orde牛角包”，
“SofftDelEnguts:”：牛角包
},
“选择”：{
“行”：{
“uu”：“%d对齐选择”，
“0”：“Aucune ligne séselectionée”，
“1”：“1路线选择”
}
}
}
} );
},
错误：function（）{table_wrapper.html（'Il n'y a pas de Pages/Articles…'）}
} );})();

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

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

变量定义的第一块

第一个Ajax调用

变量定义的第二块

第二次Ajax调用

Ajax成功函数之一

Ajax的另一个成功功能

如您所见，在执行Ajax成功函数时，您的全局变量具有由第二个块定义的值

有几种方法可以避免这种情况，例如：

将第二个块中的变量重命名为与第一个块不同：

将全局变量包含到函数调用中：

var createTable=function（检索对象，复数，单数，s
(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...')}
} );})();

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')