Bootstrap table JSON 数据无法正常工作

Question

我正在尝试以 JSON 格式保存来自 link 的数据并将该数据传递给 Bootstrap table 但它无法正常工作

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

中使用该数据

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

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

Answer 1

只需将您的 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 响应数据存储到一个变量中，然后在将数据分配给 bootstrap table.

时添加 SetTimeout

可能对你有帮助。

Answer 2

既然你提到了将数据存储到变量中的唯一想法是为了可重用性，你可以在下面做。 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 and

解释 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成功，否则你有麻烦了。

Bootstrap table JSON 数据无法正常工作

Bootstrap table with JSON data not working properly

twitter-bootstrap

twitter-bootstrap-3

bootstrap-table