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键或单击“提交”按钮时，将在空白中显示由制表器生成的表，该表包含根据各列列出的JSON数据。该JSON数据是根据在表单中输入的搜索字词生成的，但是现在我使用ball作为测试用例。

我不太确定要实现自己的目标该怎么做，因此，很高兴能得到所有帮助我的建议和时间。

Answer 1

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

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

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

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

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

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

1 个答案: