datatables - 同一页面上的数据表
问题描述
我在同一页面上定义了 2 个单独的 restAPI 响应,并且一旦调用了separateley,它们就会输出正确的值和数据表,但是对第二个数据表的调用失败。在我一直使用的 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": " <span class=\"text-decoration-none;\"><i class=\"fa fa-fast-backward\"></i></span> ",
"sLast": " <span class=\"text-decoration-none;\"><i class=\"fa fa-fast-forward\"></i></span> ",
"sNext": " <span class=\"text-decoration-none;\"><i class=\"fa fa-chevron-right\"></i></span> ",
"sPrevious": " <span class=\"text-decoration-none;\"><i class=\"fa fa-chevron-left\"></i></span> "
},
"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": " <span class=\"text-decoration-none;\"><i class=\"fa fa-fast-backward\"></i></span> ",
"sLast": " <span class=\"text-decoration-none;\"><i class=\"fa fa-fast-forward\"></i></span> ",
"sNext": " <span class=\"text-decoration-none;\"><i class=\"fa fa-chevron-right\"></i></span> ",
"sPrevious": " <span class=\"text-decoration-none;\"><i class=\"fa fa-chevron-left\"></i></span> "
},
"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...')}
} );})();
解决方案
您的总体错误是对两个表使用相同的命名全局变量。
Ajax 调用是异步的,工作流程如下:
- 第一个变量定义块
- 第一次 Ajax 调用
- 第二组变量定义
- 第二次 Ajax 调用
- Ajax 成功函数之一
- Ajax 的另一个成功函数
如您所见,在 Ajax 函数成功执行时,您的全局变量具有由第二个块定义的值。
您有几种方法可以避免这种情况,例如:
- 将第二个块中的变量重命名为与第一个块不同:
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')
- 将全局变量包含在函数调用中:
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": " <span class=\"text-decoration-none;\"><i class=\"fa fa-fast-backward\"></i></span> ",
"sLast": " <span class=\"text-decoration-none;\"><i class=\"fa fa-fast-forward\"></i></span> ",
"sNext": " <span class=\"text-decoration-none;\"><i class=\"fa fa-chevron-right\"></i></span> ",
"sPrevious": " <span class=\"text-decoration-none;\"><i class=\"fa fa-chevron-left\"></i></span> "
},
"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'));
推荐阅读
- php - SQL注入认证绕过问题
- java - 如何处理带和不带区域的日期
- events - 尝试阻止默认值时使用自定义 keydown 事件键入错误
- php - 长文本字段的Mysql查询不返回任何内容
- algorithm - 使用 K 个字母查找大小为 N 的回文总数
- drop-down-menu - 如何更新与 GeoJSON 作为数据源的散景主动交互?
- python - 使用查询在views.py中获取MultiSelectField选定项目
- c# - c# WPF linq GroupJoin to DataGrid
- c# - Unity3d New Input System(2.8),无法在编辑器中引用输入动作
- javascript - 使用平移和缩放缩放 SVG 地图;如何提高性能?