new to datatable, not able to bind simple json to datatable

new to datatable, not able to bind simple json to datatable

singhmanjeet1982singhmanjeet1982 Posts: 1Questions: 1Answers: 0
edited July 2020 in Free community support

Hi
Please see my json generated:

{"draw":1,"recordsTotal":2,"recordsFiltered":2,"data":[{"Id":"1108393c-23f2-49e0-befe-a276fc7631a1","FileName":"bv","FileDescription":"gf","FileLocation":"AFile.txt","RelevantCountry":"f","Tags":"fd"},{"Id":"2330a820-4fcd-42bd-9a12-5cf4888da5bb","FileName":"bv","FileDescription":"gf","FileLocation":"AFile.txt","RelevantCountry":"f","Tags":"fd"}]}

I am trying to bind it to

<script>


    $(document).ready(function () {
        $.noConflict();
        var $done = 0;
        //setTimeout(function () {
            $('#example').dataTable({
                "processing": false,
                "serverSide": true,
                "info": true,
                "filter": false,
                //crossDomain: true,
               
                "stateSave": true,
                "lengthMenu": [[10, 20, 50, -1], [10, 20, 50, "All"]],
                "ajax": {
                    "url": "https://localhost:44382/api/items/GetAllItemsRelatedToUser/",
                    "type": "POST",
                    //data: postData,
                    "datatype": "json",
                    "headers": {
                        //'Content-Type': 'application/json',
                        //'Authorization': '@ViewBag.bearerToken',
                        //'Access-Control-Allow-Origin': '*'
                    },
                    "success": function (result) {
                      
                        console.log(JSON.stringify(result));
                     

                    }

                },
                "columnDefs": [{
                    "targets": [0],
                    "visible": false,
                    "searchable": false
                }],
                "columns": [
                    { "data": "Id"},
                    { "data": "FileName" },
                    { "data": "FileDescription" },
                    { "data": "FileLocation" },
                    { "data": "RelevantCountry" },
                    { "data": "Tags" }

            ],
            "order": [[0, "asc"]]
            });
            //}, 2000);

    });
</script>

<div style="margin:30px;">
    <table id="example" class="display" cellspacing="0" width="100%">
        <thead>
            <tr style="text-align:left;">
                <th>Item Id</th>
                <th>File Name</th>
                <th>File Description</th>
                <th>File Location</th>
                <th>Relevant Country</th>
                <th>Tags</th>

            </tr>
        </thead>

      
    </table>

Can somebody please help here. thanks a ton

Edited by Colin - Syntax highlighting. Details on how to highlight code using markdown can be found in this guide.

Answers

  • colincolin Posts: 15,237Questions: 1Answers: 2,599
    edited July 2020

    You're using options columns and columnDefs together, which isn't supported - you'll need to put the columnDefs values into columnDefs, something like:

                    "columns": [
                        { "data": "Id", visible: false, searchable: false},
                        { "data": "FileName" },
                        { "data": "FileDescription" },
                        { "data": "FileLocation" },
                        { "data": "RelevantCountry" },
                        { "data": "Tags" }
    

    Colin

This discussion has been closed.