JS datatables returning blank rows

Question

My datatable is returning 982 blank rows and I'm really lost as to why! I also get this error message:

"Requested unknown parameter 'Key' for row 0, column 0."

I've looked in the console and this is the data that my datatable is getting from ajax:

{ "data": [ {"Summary":"Create lists of useful fields", "Created":"11/06/2020 13:03:36", "Updated":"18/01/2021 07:48:56", "Status":"Done", "Key":"PGT-2766", "Assignee":"Jane Doe", "Priority":"Lowest", "reporter":"Dave" },{"Summary":"test", "Created":"13/01/2021 14:30:04", "Updated":"13/01/2021 14:30:06", "Status":"To Do", "Key":"PGT-4622", "Assignee":"admin_user", "Priority":"Low", "reporter":"Dave" },{"Summary":"Review Rolling Programme queues/filters", "Created":"15/02/2021 14:32:21", "Updated":"08/03/2021 08:08:12", "Status":"In Progress", "Key":"PGT-5185", "Assignee":"Jane Doe", "Priority":"High", "reporter":"Dave" },{"Summary":"External LUSI Change Request Form: Bob - 19/1/2021", "Created":"19/01/2021 15:32:02", "Updated":"03/06/2021 08:59:17", "Status":"To Do", "Key":"PGT-4711", "Assignee":"admin_user", "Priority":"Low", "reporter":"Dave" } ] }

And this is my datatable:

 var table = $('#example').DataTable({
            ajax: {
                url: pageUrl,
                type: 'POST',
                contentType: 'application/json; charset=utf-8',
                dataType: "json",
                dataSrc: function (data) {
                    console.log(data.d);
                    return (data.d);
                }
            },
            "pageLength": 50,
            fixedHeader: true,
            responsive: true,
            "columns": [
                { "data": "Key" },
                { "data": "Summary" },
                { "data": "Created" },
                { "data": "Updated" },
                { "data": "Status" },
                { "data": "Priority" },
                { "data": "reporter" },
                { "data": "Assignee" }
            ],
            autoWidth: false,
            "columnDefs": [
                { "width": "50%", "targets": 0 },
                { "width": "5%", "targets": 1 },
                { "width": "5%", "targets": 2 },
                { "width": "5%", "targets": 3 },
                { "width": "5%", "targets": 4 },
                { "width": "5%", "targets": 5 }
            ],
            "order": [[1, 'asc']],
            "success": fnsuccesscallback,
            "error": fnerrorcallback
        });

        function fnsuccesscallback(data) {
            alert(data.d);

        }

        function fnerrorcallback(result) {
            alert(result.statusText);
        }

Really hoping someone can help as I'm really stuck!!!

Your json array is missing Key attribute which is your first column { "data": "Key" } . — Swati
– Swati, Commented Jun 9, 2021 at 14:49
@swati Key is in the json being returned - it's just not the first attribute. Does it need to be the first attribute in the list returned? :) — hlh3406
– hlh3406, Commented Jun 9, 2021 at 14:52
Comment out, or completely remove, the dataSrc option - it is not needed, if the JSON you show in your question is really the JSON being returned from your URL. However, your code as shown in the question does not run - that d in console.log(data.d); is undefined and therefore will throw an error. So there is a mismatch between the behavior you describe and the code you provide. — andrewJames
– andrewJames, Commented Jun 9, 2021 at 16:02
(And just to add: no, you do not have to have Key as the first attribute in each JSON object - the order does not matter.) — andrewJames
– andrewJames, Commented Jun 9, 2021 at 16:03

BeerusDev · Accepted Answer · 2021-06-10 15:32:23Z

Is this what you want? This error will indicate that a column which uses columns.data has been unable to obtain valid data to display - for example: would produce this error if the data source object for the row had no Name parameter or the data was null or undefined.

var data = [
    {
      "Summary": "Create lists of useful fields",
      "Created": "11/06/2020 13:03:36",
      "Updated": "18/01/2021 07:48:56",
      "Status": "Done",
      "Key": "PGT-2766",
      "Assignee": "Jane Doe",
      "Priority": "Lowest",
      "reporter": "Dave"
    },
    {
      "Summary": "test",
      "Created": "13/01/2021 14:30:04",
      "Updated": "13/01/2021 14:30:06",
      "Status": "To Do",
      "Key": "PGT-4622",
      "Assignee": "admin_user",
      "Priority": "Low",
      "reporter": "Dave"
    },
    {
      "Summary": "Review Rolling Programme queues/filters",
      "Created": "15/02/2021 14:32:21",
      "Updated": "08/03/2021 08:08:12",
      "Status": "In Progress",
      "Key": "PGT-5185",
      "Assignee": "Jane Doe",
      "Priority": "High",
      "reporter": "Dave"
    },
    {
      "Summary": "External LUSI Change Request Form: Bob - 19/1/2021",
      "Created": "19/01/2021 15:32:02",
      "Updated": "03/06/2021 08:59:17",
      "Status": "To Do",
      "Key": "PGT-4711",
      "Assignee": "admin_user",
      "Priority": "Low",
      "reporter": "Dave"
    }
];

var table = $('#example').DataTable({
            data: data,
            "pageLength": 50,
            fixedHeader: true,
            responsive: true,
            "columns": [
                { "data": "Key" },
                { "data": "Summary" },
                { "data": "Created" },
                { "data": "Updated" },
                { "data": "Status" },
                { "data": "Priority" },
                { "data": "reporter" },
                { "data": "Assignee" }
            ],
            autoWidth: false,
            "columnDefs": [
                { "width": "50%", "targets": 0 },
                { "width": "5%", "targets": 1 },
                { "width": "5%", "targets": 2 },
                { "width": "5%", "targets": 3 },
                { "width": "5%", "targets": 4 },
                { "width": "5%", "targets": 5 }
            ],
            "order": [[1, 'asc']],
            "success": fnsuccesscallback,
            "error": fnerrorcallback
        });

        function fnsuccesscallback(data) {
            alert(data.d);

        }

        function fnerrorcallback(result) {
            alert(result.statusText);
        }

<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/bs4/jszip-2.5.0/dt-1.10.25/b-1.7.1/b-colvis-1.7.1/b-html5-1.7.1/b-print-1.7.1/r-2.2.9/rg-1.1.3/datatables.min.css"/>

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" referrerpolicy="no-referrer"></script>

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/pdfmake.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/vfs_fonts.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/v/bs4/jszip-2.5.0/dt-1.10.25/b-1.7.1/b-colvis-1.7.1/b-html5-1.7.1/b-print-1.7.1/r-2.2.9/rg-1.1.3/datatables.min.js"></script>
 <div class ="container">
            <table id="example" class="table table-bordered" cellspacing="0" width="100%">
                <thead class="thead-dark">
                    <tr>
                    <th>Key</th>
                    <th>Summary</th>
                    <th>Created</th>
                    <th>Updated</th>
                    <th>Status</th>
                    <th>Priority</th>
                    <th>Reporter</th>
                    <th>Assignee</th>
                    </tr>
                </thead>
                <tbody>
                  
                </tbody>
            </table>
            </div>

Collectives™ on Stack Overflow

JS datatables returning blank rows

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related