制表器为什么不从我的JSON数据生成表？

Question

我正在尝试使用Tabulator CDN生成表。 该表将从远程服务器上生成的JSON数据生成。 仅当将search_param ， items_per_page和page_number搜索参数传递给它时，才会生成此JSON数据。 因此，例如，如果我在搜索表单中输入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"
        }
    }
}

我正在尝试使用制表器来获取此数据并生成一个表。 这是与此任务关联的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

当在表单中按Enter或单击Submit按钮时，制表符生成的表应出现在空白区域中，该表包含根据相应列列出的JSON数据。 该JSON数据是根据在表单中输入的搜索字词生成的，但是现在我将ball作为测试用例。

我不太确定要实现我的目标该怎么做，因此将不胜感激地得到帮助您花费的所有建议和时间。

Answer 1

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

您似乎在使用非jQuery方法构建表，并使用jQuery包装器在其上设置数据，您只能使用一个或另一个，不能同时使用两者。

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

另外，您似乎正在手动对数据进行分页，您是否知道Tabulator已具有内置分页功能

为了回应Patrick所说的，您的Submit函数需要返回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;
}