将DevExtreme网格添加到Wordpress

我正试图找出如何将DevExtreme的网格添加到wordpress中。

以下是我试图添加到wordpress中的一个示例。

http://js.devexpress.com/Demos/WidgetsGallery/#demo/datagridgridpagingandscrollingpager/generic/light/default

我已经在functions.php文件中添加了带有wp_enque_script的脚本，因此它将与所有页面一起加载。

现在我正试图弄清楚如何添加数据部分

我现在正试图弄清楚在哪里可以添加代码、标记和数据。这些零件中的每一件在每次装载时都会有所不同。

有人对我可以把这个放在哪里有什么建议吗？

非常感谢！

<div id="gridContainer"></div>

$("#gridContainer").dxDataGrid({
dataSource: customers,
paging: {
    pageSize: 10
},
pager: {
    showPageSizeSelector: true,
    allowedPageSizes: [5, 10, 20]
},
columns: ['CompanyName', 'City', 'State', 'Phone', 'Fax']
});

和

var customers = [{
"ID": 1,
"CompanyName": "Super Mart of the West",
"Address": "702 SW 8th Street",
"City": "Bentonville",
"State": "Arkansas",
"Zipcode": 72716,
"Phone": "(800) 555-2797",
"Fax": "(800) 555-2171",
"Website": ""
}, {
"ID": 2,
"CompanyName": "Electronics Depot",
"Address": "2455 Paces Ferry Road NW",
"City": "Atlanta",
"State": "Georgia",
"Zipcode": 30339,
"Phone": "(800) 595-3232",
"Fax": "(800) 595-3231",
"Website": ""
}]