如何将我的表转换为 jQuery 数据表？答案

【问题标题】：How to convert my table into a jQuery dataTable?如何将我的表转换为 jQuery 数据表？
【发布时间】：2019-11-05 13:53:50
【问题描述】：

我有两个数组，我已经成功地用它们在 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>

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

["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", "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", "5.7", "3.6", "36.6"]

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

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

【问题讨论】：

标签： javascript jquery arrays flask datatables

【解决方案1】：

您正在进行异步调用，但在初始化 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>

【讨论】：

这几乎可以正常工作，但是，我遇到了 3 个错误，每个错误对应一个特定的单元格。我认为这是因为那些单元格的数据以数字开头。有没有办法将整个数组转换为JS中的字符串？
我不确定是什么导致了您的错误，通常 dataTables 应该能够处理以数字开头的数据，但是对于您的问题，您可以尝试将 Array.map 与返回新数组的字符串构造函数一起使用. newDataList = dataList.map(String)
会试一试，使用数组和 .toString();没用
@RobertSmith 如果您可以将收到的错误与相关数据一起发布或创建一个小提琴，那么寻找可能的原因对我和其他人来说会更有用
@RobertSmith 您编辑的问题是否包含有错误的数据？这一行对我来说似乎很好。