带有 JSON 数据的引导表无法正常工作

Question

我正在尝试以 JSON 格式保存来自链接的数据并将该数据传递到 Bootstrap 表，但它无法正常工作

我可以在控制台中看到数据，如果我使用data-url，它可以正常工作，但我想将数据保存在变量中并在表中使用该数据。

Here is the jsfiddle

如果我使用此代码，它可以正常工作，但我想先将数据保存到变量中，然后将其分配给表。

$.get("https://api.github.com/users/wenzhixin/repos", function(data){
    $('#table').bootstrapTable({
        data: data
    });
});

Answer 1

由于您提到将数据存储到变量中的唯一想法是为了可重用性，您可以在下面执行此操作。 Working Fiddle

   var jsonDataCall ;      // keep a global variable in the scope.

   $(function() { 
    $.get("https://api.github.com/users/wenzhixin/repos", function(result){
        jsonDataCall = result;   // save it to a variable for later use
        $('#table').bootstrapTable({
            data: jsonDataCall   // use the same variable to build the table
        });
    });
   });

顺便说一句，async 已被弃用，你不应该再使用它了 more details here 和 here

---

解释 jsfiddle 中提供的代码中的问题：

var jsonDataCall = $.getJSON("https://api.github.com/users/wenzhixin/repos", function(result){
        jsonDataCall =result;
    });

var jsonData = $.ajax({    // this variable is not used anywhere in the code.
        async: false,
        dataType: "json",
        url: "https://api.github.com/users/wenzhixin/repos",
        success: function(result) {
            jsonData = result;
        }
    });

$(function () {
      var $table = $('#randomTable').bootstrapTable({data: jsonDataCall});
 });

var $table = $('#randomTable').bootstrapTable({data: jsonDataCall}); 这一行在文档准备就绪时开始。这里我们有jsonDataCall，它将访问其中的值。但是在第一行中，您为这个变量分配了一个 ajax 方法，而不是一个值。所以上面的data: jsonDataCall 将尝试将 ajax 函数分配给数据变量，它不会分配从服务器返回的值，因为它会在 ajax 成功执行后出现。

解决方案：当您处理 ajax 调用时，您必须确保依赖于返回的服务器结果的所有代码都应该在 ajax 成功时启动，否则您将遇到麻烦。

Answer 2

只需使用以下代码更改您的 jQuery 代码：-

var jsonData;

$.ajax({
    async: false,
    dataType: "json",
    url: "https://api.github.com/users/wenzhixin/repos",
    success: function(result) {
        jsonData = result;
    }
});

$(function () {
        $('#randomTable').bootstrapTable({data: jsonData});
});

function queryParams() {
    return {
        type: 'owner',
        sort: 'updated',
        direction: 'desc',
        per_page: 100,
        page: 1
    };
}

我已将 Ajax 响应数据存储到一个变量中，然后在将数据分配给引导表时添加 SetTimeout。

也许对你有帮助。