Question

所以我正在生成一个包含结果的表，这些结果是从搜索到的JSON返回的，我希望能够使用分区，搜索，排序选项，因此我决定使用数据表。正在生成表并使用正确的结果进行填充，但排序选项，搜索和分页选项根本不会出现。我究竟做错了什么？

<!DOCTYPE html>
<html lang="en">
<head>
<title>Конкуренција</title>
</head>


<body>

<div id="cars" class="cars-container"></div>

<label for="amount">Цена:</label>
<input type="text" class="price-range-slider" id="amount"      onclick="myFunction()" readonly style="border:0; color:#f6932f; font-weight:bold">
<div id="slider-range" style="width:300px"></div>

<br>



    <p>
    <label for="sili">Коњски сили:</label>
    <input type="text" id="sili" onclick="myFunction()" readonly     style="border:0;  color:#f6931f; font-weight:bold;">
<div id="rejndz" style="width:300px" ></div>

<div>
    <h4><label>Бренд</label></h4>
    <select id="brand" multiple="multiple" onclick="myFunction()" data-    style="btn-primary">
</select>

</div>
<br>

<div>
<h4><label>Тип на мотор</label></h4> 

<select id="engineCap" multiple="multiple" onclick="myFunction()" >

</select>

<button onclick="myFunction(); dataTable(); ">Барај</button>

</table>
var selected = [];
    var kapacitet = [];
    var cena = [];
    var hp = [];
    var niza = [];
    var finalKola = [];
function addTable() {
            document.getElementById("results").innerHTML = "";
            var myTableDiv = document.getElementById("results")
            var tableBody = document.createElement('TBODY')

            myTableDiv.border = '1'
            myTableDiv.appendChild(tableBody);  

            var heading = []; 
                    heading[0] = "Бренд"
                    heading[1] = "Модел"
                    heading[2] = "Капацитет"
                    heading[3] = "Коњски сили"
                    heading[4] = "Цена"


            //koloni 
            var tr = document.createElement('TR');
            tableBody.appendChild(tr);
            for (a = 0; a < heading.length; a++) {
                var th = document.createElement('TH')
                th.width = '75';
                th.appendChild(document.createTextNode(heading[a]));
                tr.appendChild(th);
            }

            //table rows
            for (a = 0; a < finalKola.length; a++) {
                var tr = document.createElement('TR'); 

                    var td = document.createElement('TD')
                    td.appendChild(document.createTextNode(finalKola[a].Brand));
                    tr.appendChild(td);
                    var td = document.createElement('TD')
                    td.appendChild(document.createTextNode(finalKola[a].Model));
                    tr.appendChild(td);
                    var td = document.createElement('TD')
                    td.appendChild(document.createTextNode(finalKola[a].engineCap));
                    tr.appendChild(td);
                    var td = document.createElement('TD')
                    td.appendChild(document.createTextNode(finalKola[a].sili));
                    tr.appendChild(td);
                    var td = document.createElement('TD')
                    td.appendChild(document.createTextNode(finalKola[a].amount + " €"));
                    tr.appendChild(td);

                tableBody.appendChild(tr); 

            }

        $(document).ready(function (){
                        {
                            $('#results').dataTable();
                        }
                 });
        }

这些是我在控制台中遇到的错误：

Uncaught TypeError: Cannot read property 'mData' of undefined at HTMLTableCellElement.<anonymous> (jquery.dataTables.min.js:88) at Function.each (jquery.js:368) at HTMLTableElement.<anonymous> (jquery.dataTables.min.js:88) at Function.each (jquery.js:368) at jQuery.fn.init.each (jquery.js:157) at jQuery.fn.init.p [as dataTable] (jquery.dataTables.min.js:80) at dataTable (index.html:268) at HTMLButtonElement.onclick (index.html:75)

在以下代码中为finalKola赋值。此代码从两个范围滑块和两个按钮获取值，并搜索JSON。

for(var u=0;u<koli.length;u++)
    {
        if((koli[u].sili > minSili)  && (koli[u].sili < maxSili) && (parseInt(koli[u].amount.replace(',','')) > minCena) && (parseInt(koli[u].amount.replace(',','')) < maxCena))
        {

            if( (kapacitet.length > 0 && $.inArray(koli[u].engineCap,kapacitet) != -1) &&
            (selected.length > 0 && $.inArray(koli[u].Brand,selected) != -1))
            {
                finalKola.push(koli[u]);
            }   
            else if(kapacitet.length == 0 && selected.length == 0)
            {
                finalKola.push(koli[u]);
            }
            else if((kapacitet.length > 0 && $.inArray(koli[u].engineCap,kapacitet) != -1) &&
            (selected.length == 0))
            {
                finalKola.push(koli[u]);
            }
            else if((selected.length > 0 && $.inArray(koli[u].Brand,selected) != -1) &&
            (kapacitet.length == 0))
            {
                finalKola.push(koli[u]);
            }

        }           

    }

Answer 1

我认为DataTable并未应用于您的桌面，因为您在datatable上应用了$(document).ready并在您的函数中创建了表格。

您可以在创建表格后应用datatable。

function addTable() {
        document.getElementById("results").innerHTML = "";
        var myTableDiv = document.getElementById("results")
        var tableBody = document.createElement('TBODY')

        myTableDiv.border = '1'
        myTableDiv.appendChild(tableBody);

        var heading = [];
        heading[0] = "Бренд"
        heading[1] = "Модел"
        heading[2] = "Капацитет"
        heading[3] = "Коњски сили"
        heading[4] = "Цена"


        //koloni 
        var tr = document.createElement('TR');
        tableBody.appendChild(tr);
        for (a = 0; a < heading.length; a++) {
            var th = document.createElement('TH')
            th.width = '75';
            th.appendChild(document.createTextNode(heading[a]));
            tr.appendChild(th);
        }

        //table rows
        for (a = 0; a < finalKola.length; a++) {
            var tr = document.createElement('TR');

            var td = document.createElement('TD')
            td.appendChild(document.createTextNode(finalKola[a].Brand));
            tr.appendChild(td);
            var td = document.createElement('TD')
            td.appendChild(document.createTextNode(finalKola[a].Model));
            tr.appendChild(td);
            var td = document.createElement('TD')
            td.appendChild(document.createTextNode(finalKola[a].engineCap));
            tr.appendChild(td);
            var td = document.createElement('TD')
            td.appendChild(document.createTextNode(finalKola[a].sili));
            tr.appendChild(td);
            var td = document.createElement('TD')
            td.appendChild(document.createTextNode(finalKola[a].amount + " €"));
            tr.appendChild(td);

            tableBody.appendChild(tr);

        }
            $('#results').dataTable().fnDestroy();
            $('#results').dataTable();
    }

Answer 2

你的脚本在thead之前添加了tbody，将其更改为先附加Thead tr然后再添加tbody。

var selected = [];
var kapacitet = [];
var cena = [];
var hp = [];
var niza = [];
var finalKola = [];
 function addTable() {
        document.getElementById("results").innerHTML = "";
        var myTableDiv = document.getElementById("results")
        var tableBody = document.createElement('TBODY')

        myTableDiv.border = '1'


        var heading = []; 
                heading[0] = "Бренд"
                heading[1] = "Модел"
                heading[2] = "Капацитет"
                heading[3] = "Коњски сили"
                heading[4] = "Цена"


        //koloni 
        var tr = document.createElement('TR');
        tableBody.appendChild(tr);
        for (a = 0; a < heading.length; a++) {
            var th = document.createElement('TH')
            th.width = '75';
            th.appendChild(document.createTextNode(heading[a]));
            tr.appendChild(th);
        }
        myTableDiv.appendChild(tableBody);  
        //table rows
        for (a = 0; a < finalKola.length; a++) {
            var tr = document.createElement('TR'); 

                var td = document.createElement('TD')
                td.appendChild(document.createTextNode(finalKola[a].Brand));
                tr.appendChild(td);
                var td = document.createElement('TD')
                td.appendChild(document.createTextNode(finalKola[a].Model));
                tr.appendChild(td);
                var td = document.createElement('TD')
                td.appendChild(document.createTextNode(finalKola[a].engineCap));
                tr.appendChild(td);
                var td = document.createElement('TD')
                td.appendChild(document.createTextNode(finalKola[a].sili));
                tr.appendChild(td);
                var td = document.createElement('TD')
                td.appendChild(document.createTextNode(finalKola[a].amount + " €"));
                tr.appendChild(td);

            tableBody.appendChild(tr); 

        }

    $(document).ready(function (){
                    {
                        $('#results').dataTable();
                    }
             });
    }

数据表无法正常工作

2 个答案: