*Update!

Table is showing but only in Chrome browser, not other browsers. Tried in Safari and Opera and did not see table on screen. Please help! Need to be compatible with all browsers if possible.

original post:

我试图加载一个从API中提取数据的表，以显示加密货币的价格。当我从html页面加载它时，它可以正常工作，但在wordpress中不起作用。我正在使用Tabulator 当前依赖于Jquery和Jquery UI的库（具体是Jquery UI小部件）我也尝试过在这段代码中使用“json2”，但它根本没有显示在页面上，但当我查看页面源代码时，它就出现了。我通过脚本n样式插件添加Jquery。我甚至将代码更改为“无冲突”，还尝试将所有美元符号更改为“Jquery”，但都不起作用，尝试加载自己的Jquery，并尝试将Jquery ui core作为依赖项添加到“tabletorlink”，但目前还没有成功。非常感谢您的任何意见！更可取的是采取明确的行动步骤，因为我对这一点还是比较陌生的。

页面链接here.

函数中的代码。子主题的php文件如下：

 function add_theme_scripts() {
wp_register_style( \'tabulator\', \'https://cdnjs.cloudflare.com/ajax/libs/tabulator/3.3.3/css/tabulator.min.css\' );
wp_enqueue_style(\'tabulator\');

wp_deregister_script(\'jquery\');
wp_register_script(\'jquery\',
 \'https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js\',
     array() , \'3.2.1\', true);
wp_enqueue_script( \'jquery\');
wp_deregister_script(\'jquery-ui-core\');
wp_register_script(\'jquery-ui-core\',  \'https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js\', array(\'jquery\') , \'1.12.1\', true);
wp_enqueue_script(\'jquery-ui-widget\');
wp_register_script( \'tabulatorlink\', \'https://cdnjs.cloudflare.com/ajax/libs/tabulator/3.3.3/js/tabulator.min.js\', array(\'jquery\', \'jquery-ui-core\', \'jquery-ui-widget\'), false, true);
wp_enqueue_script(\'tabulatorlink\');
}

add_action( \'wp_enqueue_scripts\', \'add_theme_scripts\' );

表的自定义Jquery代码如下：（通过脚本n样式添加）

<script>

(function($) {
    //create Tabulator on DOM element with id "example-table
    $(document).ready(function() {
$("#example-table").tabulator({
    height:1000,// set height of table, this enables the Virtual DOM and improves render speed dramatically (can be any valid css height value)
    responsiveLayout:true,
    layout:"fitColumns", //fit columns to width of table (optional)
    paginationSize:100,
    columns:[ //Define Table Columns
        {title:"Rank", field:"rank", align:"center", width:70},
        {title:"Name", field:"name", headerFilter:"input", width:130},
        {title:"Symbol", field:"symbol", headerFilter:"input", width:80},
        {title:"Price (USD)", field:"price_usd", formatter:"money", width:110},
        {title:"24hr Volume (USD)", field:"24h_volume_usd", width:155},
        {title:"Market Cap (USD)", field:"market_cap_usd", formatter:"money", width:150},
        {title:"Available Supply", field:"available_supply", width:140},
        {title:"% Change 1hr", field:"percent_change_1h", width:130},
        {title:"% Change 24hr", field:"percent_change_24h", width:130},
        {title:"% Change 7d", field:"percent_change_7d", width:130},
    ],
    rowClick:function(e, row){ //trigger an alert message when the row is clicked
        alert("Individual coin pages coming soon");
    },
});


//load sample data into the table
$("#example-table").tabulator("setData", "https://api.coinmarketcap.com/v1/ticker/?start=0&limit=1500");



Tabulator.extendExtension("ajax", "defaultConfig", {
    type:"POST",
    contentType : "application/json; charset=utf-8"


});

$("#example-table").tabulator({
    ajaxURL:"https://api.coinmarketcap.com/v1/ticker/?start=0&limit=1500", //ajax URL
    ajaxParams:{key1:"value1", key2:"value2"}, //ajax parameters
    ajaxConfig:"POST", //ajax HTTP request type
});


});

})( jQuery );


</script>