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

Question

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

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

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

{
    "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 作为测试用例。

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

Answer 1

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

您似乎正在使用非 jQuery 方法来构建您的表格，并使用 jQuery 包装器来设置数据，您只能使用其中之一，不能同时使用两者。

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

另外，您似乎在手动对数据进行分页，您是否知道 Tabulator 已经有 Built In Pagination

为了回应 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;
}