时间戳

首页 > 解决方案 > 为什么 Tabulator 没有从我的 JSON 数据生成表格？

javascript - 为什么 Tabulator 没有从我的 JSON 数据生成表格？

问题描述

我正在尝试使用 Tabulator CDN 生成一个表格。该表将从远程服务器上生成的 JSON 数据生成。此 JSON 数据仅在search_param、items_per_page和page_numbersearch 参数传递给它时生成。因此，例如，如果我ball在搜索表单中输入并按 Enter，则此搜索词以及每页项目的默认数量和页码将传递到远程服务器以生成如下所示的 URL：

http://www.hadrians-search.tk/search?search_param=ball&items_per_page=6&page_number=6

这将返回 JSON 数据。以下是使用搜索词生成的 JSON 数据示例mario：

{
    "0": {
        "price": "218.26",
        "shippingCost": {
            "expeditedShipping": "false",
            "oneDayShippingAvailable": "false",
            "shipToLocations": "Worldwide",
            "shippingServiceCost": {
            "_currencyId": "USD",
            "value": "0.0"
            },
        "shippingType": "FreePickup"
        },
       "title": "Hungarian State Opera - Mario and the Magician and Bluebeard's Cas... - New York",
       "user_args": {
            "advanced": null,
            "pages": {
                "entries_per_page": 1,
                "page_number": 1
            },
        "search_terms": "mario"
       }
    },
    "1": {
        "price": "218.26",
        "shippingCost": {
            "expeditedShipping": "false",
            "oneDayShippingAvailable": "false",
            "shipToLocations": "Worldwide",
            "shippingServiceCost": {
                "_currencyId": "USD",
                "value": "0.0"
            },
        "shippingType": "FreePickup"
        },
        "title": "Hungarian State Opera - Mario and the Magician and Bluebeard's Cas... - New York",
        "user_args": {
            "advanced": null,
            "pages": {
                "entries_per_page": 1,
                "page_number": 1
            },
         "search_terms": "mario"
        }
    }
}

我正在尝试使用 Tabulator 获取这些数据并用它生成一个表格。这是与此任务关联的 HTML：

<div id="json-table" class="search-container">
<form id="search" onsubmit="jsonTable">
  <input type="text">
  <input type="submit" value="Submit">
</form>
</div>

以下是应该处理此任务的 JavaScript：

<script>
    var table = new Tabulator("#json-table", {
        height:"311px",
        layout:"fitColumns",
        placeholder:"No Data Set",
        columns:[
            {title:"Title", field:"title", sorter:"string"},
            {title:"Price", field:"price", sorter:"number", formatter:"progress"},
            {title:"Shipping Cost", field:"value", sorter:"string"},
            {title:"Shipping Type", field:"shippingType", formatter:"string", align:"center"},
        ],
    });

    function jsonTable()    {

        table.setData("http://hadrians-search.tk/search", {search_param="ball", items_per_page="6", page_number="6"})
    });
    return false;
    } 
</script>

我将ball其用作测试用例来弄清楚为什么会这样，然后我将实现在表单中输入搜索词并执行操作的功能。当我单击“提交”按钮或在表单中按 Enter 时，它不会生成表格，而是似乎正在重新加载页面。您可以在此 URL 上亲自查看：

http://cs.oswego.edu/~jmcquaid/CSC-380/index.html

当在表单中按下回车键或单击提交按钮时，预计会在空白处出现一个 Tabulator 生成的表格，其中包含根据相应列列出的 JSON 数据。此 JSON 数据是根据在表单中输入的搜索词生成的，但是现在我将ball其用作测试用例。

我不太确定要尝试什么来实现我的目标，所以任何和所有帮助我的建议和时间都会得到很大的赞赏。

标签： javascripthtmljsontabulator

解决方案

默认情况下，提交表单将触发将加载新页面的请求。

您似乎正在使用非 jQuery 方法来构建您的表和 jQuery 包装器来设置数据，您只能使用一种或另一种，不能同时使用两者。

您似乎还在为每个请求构建一个新表，并在创建表之前在加载时设置表数据，因为setData函数是在 jsonTable 函数之外调用的。

此外，您似乎正在手动对数据进行分页，您是否知道 Tabulator 已经内置了分页

为了回应 Patrick 所说的，您的提交函数需要返回 false，因此 javascript 应如下所示：

//define table outside of function and assign to table variable
var table = new Tabulator("#json-table", {
    height:"311px",
    layout:"fitColumns",
    placeholder:"No Data Set",
    columns:[
        {title:"Title", field:"title", sorter:"string"},
        {title:"Price", field:"price", sorter:"number", formatter:"progress"},
        {title:"Shipping Cost", field:"value", sorter:"string"},
        {title:"Shipping Type", field:"shippingType", formatter:"string", align:"center"},
    ],
})

//define data loading function
function jsonTable() {

    //set data on table, using table variable (you will need to pull in the paramters from your form here)
    table.setData("http://hadrians-search.tk/search", {search_param="ball", items_per_page="6", page_number="6"});

    //prevent page reload
    return false;
}

推荐阅读