stackoom
  简体   繁体   中英

Datatable not working properly

 原文  2016-12-19 09:14:58  9   2    javascript/ html/ datatables

Question

So I am generating a table with results which are returned from a JSON that is searched through and I would like to table to have pagionation, search, sorting options so I decided to use Data Tables. The table is being generated and populated with the correct results but the sorting options, the search and the pagination options do not appear at all. What am I doing wrong? 

<!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();
                        }
                 });
        }

These are the errors I get in console:

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)

Assigning value to finalKola in the following code. This code takes values from two range slider and two buttons and searches through a 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]);
            }

        }           

    }

2 answers

solution1
 0  2016-12-19 09:26:54

I think DataTable is not applying on your table as you are applying datatable on $(document).ready and creating table in your function.

You can apply datatable after you have created the table. 

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();
    }

solution2
 0  2016-12-19 09:59:36

Your script is adding tbody before the thead, changed that to append Thead tr first and then 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();
                    }
             });
    }

暂无
暂无

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

Related Question Datatable in AngularJs is not working properly DataTable Ascending order Not Working Properly bootstrap datatable sorting not working properly Datatable js sorting not working properly Datatable copy is not working properly due to some character Update DataTable with JsonResponse from Django not working properly Why my design of datatable data is not properly working in JQuery Datatable? DataTable auto generated serial numbering not working properly.. for every pages Jquery DataTable Sorting Numeric value column not working properly DataTable, export to pdf is not working properly with two headers and colspan
Related Tags
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM