前端之家

  1. 首页
  2. 问答

如何将表格转换为jQuery dataTable？

• 问答

我有两个数组已经成功用于在JavaScript中创建表。现在，由于其UI功能，我想使该表成为jQuery DataTable。我以为我有创建一个的正确方法，但是出现了错误。

如果有所不同，它也位于flask应用程序中

代码

<body>
    <!-- Load jQuery -->
    <script src = "http://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js" crossorigin = "anonymous"></script>
    <!-- jQuery dataTables script-->
    <script type="text/javascript" src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
    <!-- If that fails,we have a backup in our directory-->
    <script type = text/javascript src = "{{
        url_for('static',filename = 'jquery.js') }}"></script>
    <script type = text/javascript src = "{{
        url_for('static',filename = 'jQuery.dataTables.min.js') }}"></script>

    <!-- Form for submitting our NBA Data-->
    <form id = "nameForm" role = "form">
        <!-- Input box so we can search by player name -->
        <input name = "text" type = "text" id = "searchBox">
        <!-- Button that we will use to make the actual ajax call -->
        <button id = "searchBtn"> Search </button>
    </form>

    <!-- Container that we will add our data table to later -->
    <table id = "myTable" class = "display" width = "25%"></table>

    <!-- Script for the button click action -->
    <script type = text/javascript> 
        //Root stuff
    $SCRIPT_ROOT = {{ request.script_root|tojson|safe }};
    var dataList;
    var titles;
    var dtColumns;

        //Root so we can get the data from our form
        $('button#searchBtn').click(function(e) {
            //Prevent our form from submitting,which is its default action/purpose
            e.preventDefault();
            //Get the data from our function in the flask App
            $.getJSON($SCRIPT_ROOT + '/_get_data',{
                //Our searchName variable will be the one from our HTML input box
                searchName: $('input[name = "text"]').val(),},function(data) {
                dataList = data.dataList;
                titles = data.headers;
                dtColumns = [];
                for (var i = 0; i < titles.length; i++) {
                    dtColumns.push({ title : titles[i] });
                }
            });
        }); 
        //When our page is fully loaded,convert the table to a jQuery data table
        $(document).ready(function () {
            $('#myTable').DataTable( {
                data: dataList,columns: dtColumns  
        });
        })
    </script>


</body>

编辑：我正在使用的数组以及最新的错误 dtColums是

["Player","Pos","Age","Tm","G","GS","MP","FG","FGA","FG%","3P","3PA","3P%","2P","2PA","2P%","eFG%","FT","FTA","FT%","ORB","DRB","TRB","AST","STL","BLK","TOV","PF","PTS"]

dataList是

["James Harden","SG","30","HOU","7","35.3","9.1","24.0",".381","3.4","13.6",".253","5.7","10.4",".548",".452","14.9","16.1",".920","1.4","3.7","5.1","7.4","1.0","0.4","3.6","36.6"]

在我的浏览器窗口中的警报中返回的当前错误：

DataTables警告：表id = myTable-第0行第12列请求的未知参数'12'。有关此错误的更多信息，请参见http://datatables.net/tn/4 DataTables警告：table id = myTable-请求的第4行第1列的未知参数'1'。有关此错误的更多信息，请参见http://datatables.net/tn/4

a172009839 回答：如何将表格转换为jQuery dataTable？

您正在进行异步调用，但没有等待它返回才初始化DataTable。基本上，您试图从没有所需值的变量创建dataTable。您可以尝试在getJSON函数的回调中初始化表。

我已经很长时间没有使用DataTables了，并且我记得我总是在初始化之前将数据写到表中，但是您可以尝试一下； 

    <script type = text/javascript> 
    //Root stuff
$SCRIPT_ROOT = {{ request.script_root|tojson|safe }};
var dataList;
var titles;
var dtColumns;

    //Root so we can get the data from our form
    $('button#searchBtn').click(function(e) {
        //Prevent our form from submitting,which is its default action/purpose
        e.preventDefault();
        //Get the data from our function in the Flask App
        $.getJSON($SCRIPT_ROOT + '/_get_data',{
            //Our searchName variable will be the one from our HTML input box
            searchName: $('input[name = "text"]').val(),},function(data) {
            dataList = data.dataList;
            titles = data.headers;
            dtColumns = [];
            for (var i = 0; i < titles.length; i++) {
                dtColumns.push({ title : titles[0] });
            }
            $('#myTable').DataTable( {
            data: dataList,columns: dtColumns  
            });

        });
    }); 

</script>
arraysdatatablesflaskjavascriptjquery
本文链接：https://www.f2er.com/3159080.html

大家都在问