在datatable中显示JSON数据

时间:2015-02-25 21:37:47

标签: javascript jquery html datatables html-table

首先,我有格式的正确JSON数据:

{"data":[{"ID":1,"aktivnost":"prodaja","vrsta":"Kultura","artikl":"psenica","6":222,"jmere":"Kg","7":290,"porez":20,"dobavljac":"M. Milic","datum":"2014-04-24","datum_dospeca":"0000-00-00","8":288,"nacin_placanja":"gotovinsko","skladiste":"Novo skladiste","opis":"Prodaja robe bla bla bla"},{"ID":2,"aktivnost":"prodaja","vrsta":"kultura","artikl":"kukuruz","6":777,"jmere":"kom","7":8000,"porez":20,"dobavljac":"milence","datum":"2014-04-19","datum_dospeca":"0000-00-00","8":8000,"nacin_placanja":"gotovinsko","skladiste":"nn","opis":"opis"},{"ID":3,"aktivnost":"investicija","vrsta":"parcela","artikl":"Nad gred","6":1,"jmere":"kom","7":2300,"porez":20,"dobavljac":"Nebojsa B.","datum":"2014-04-04","datum_dospeca":"0000-00-00","8":1200,"nacin_placanja":"gotovinsko","skladiste":"","opis":"opis"}]}

我有HTML:

 <table id="example" class="table table-striped table-bordered table-responsitive" cellspacing="0" width="100%">
        <thead>
            <tr>
                <th>ID</th>
                <th>Datum</th>
                <th>Dospece</th>
                <th>Akt</th>
                <th>Vrsta</th>
                <th>Artikl</th>
                <th>Kolicina</th>
                <th>Iznos</th>
                <th>Placeno</th>
                <th>Nacin</th>
                <th>Kome</th>
                <th>Skl</th>
                <th></th>
            </tr>
        </thead>

        <tfoot>
            <tr>
               <th>ID</th>
                <th>Datum</th>
                <th>Dospece</th>
                <th>Akt</th>
                <th>Vrsta</th>
                <th>Artikl</th>
                <th>Kolicina</th>
                <th>Iznos</th>
                <th>Placeno</th>
                <th>Nacin</th>
                <th>Kome</th>
                <th>Skl</th>
                <th></th>
            </tr>
        </tfoot>
    </table>

我尝试使用此Javascript代码运行dataTable:

$(document).ready(function() {
    drawVisualization();

    });
function drawVisualization() {

                $('#example').dataTable({ 
                         "ajax": {
            "url": 'getfinansije.php',
            "type": 'POST',
            "dataSrc": function (json) {
                if(!json.data){

            //$('#tmeh').hide();
            json.data = [];
        }
                return json.data;
            },
                    "error": function (data){
                console.log(data);
                    }
        },
                    paging: false,
                    //"dom":' <"search"f><"top"l>rt<"bottom"ip><"clear">',
                    "oLanguage": {
    "sInfo": 'Ukupno _END_ transakcija.',
    "sInfoEmpty": 'Nema zabelezenih transakcija',
    "sEmptyTable": "Nema transakcija, dodajte klikom na dugme 'Dodaj kupoprodaju'.",
},
                    "columns": [{
                            "data": "ID"
                        }, {
                            "data": "datum"
                        }, 
                        {
                            "data": "datum_dospeca"
                        },{
                            "data": "aktivnost"
                        },

                        {
                            "data": "vrsta"
                        },
                        {
                            "data": "artikl"
                        },

                        {
                            "data": "6"
                        },
                         {
                            "data": "7"
                        },{
                            "data": "8"
                        },
                         {
                            "data": "dobavljac"
                        },
                        {
                            "data": "nacin_placanja"
                        },
                        {
                            "data": "skladiste"
                        },
                        {
                            "data": "jmere"
                        },
                        {
                            "data": "porez"
                        },
                         {
                            "data": "opis"
                        },
                        {
                            "data": "akcija"
                        }
                    ],
                     "fnFooterCallback": function (nRow, aasData, iStart, iEnd, aiDisplay) {

        var columnas = [6, 7, 8]; //the columns you wish to add            
        for (var j in columnas) {
            var columnaActual = columnas[j];
            var total = 0;
            for (var i = iStart; i < iEnd; i++) {
                total = total + parseFloat(aasData[aiDisplay[i]][columnaActual]);
            }
            $($(nRow).children().get(columnaActual-1)).html(total);

        }
    }, 
                    "columnDefs": [
                            {
                        "targets": [0, 12, 13, 14],
                        "visible":false
                            },
                         {
                        "targets": 15,
                        "data": "akcija",
                        "render": function(data, type, full, meta) {
                            // return data; 
                            return '<div style="float:right;"><button class="btn btn-info troskovnik" data-toggle="modal" data-target="#update">Detalji...</button> <i  data-toggle="modal" data-target="#delete" class="fa fa-times"></i></div>';
                        }
                            },
                              { 
                        "targets": 3,
                        "data": "aktivnost",
                        "render": function(data, type, full, meta) {
                            if (data=='prodaja') {
                            return '<button class="btn btn-success">'+data+'</button>';
                            } else if (data=='kupovina'){
                                                        return '<button class="btn btn-warning" >'+data+'</button>';

                            } else {
                                                        return '<button class="btn btn-info" >'+data+'</button>';

                            }

                            }
                              }


    ]
                });


            }

但是我没有看到数据表,所以dataTable就在那里,但JSON的值我看不到。我只看到没有数据的空白表。

同样在控制台日志中有2个错误:

  

dataTables.keyTable.js:1169未捕获的TypeError:无法读取属性   &#39; KEYTABLE&#39;未定义的

     

未捕获的TypeError:无法读取属性&#39; style&#39;未定义的   undefinedjquery.dataTables.min.js:58

另外请看我试图破坏桌子时得到的东西 - 我得到同样的错误:

我得到了这两个错误,但我不知道那意味着什么。我试着解决这个问题,请帮帮我!

0 个答案:

没有答案