PHPFixing
  • Privacy Policy
  • TOS
  • Ask Question
  • Contact Us
  • Home
  • PHP
  • Programming
  • SQL Injection
  • Web3.0

Friday, September 9, 2022

[FIXED] Why will data not bind if success and error are defined - datatables ajax

 September 09, 2022     ajax, datatable, jquery, json     No comments   

Issue

My ajax call is:

var networkslisttab = null;

...

networkslisttab = $('#networkslisttable').DataTable({
    "ajax": { "url": networkstoolboxURL, "dataType": "json", "dataSrc": '', "success": function (data) { networkslisttab.processing(false); console.log(data); }, "error": function (error) { console.log("error in networks"); } },
    //"dataSrc": '',        
    "columns": [
        {
            "data": 'reference_id',
            "width": '15%',
        },
        { "data": 'name' },
        {
            "data": 'num_points',
            "width": '15%',
        },
        {
            "data": 'num_sections',
            "width": '15%',
        }
    ],
    "order": [[0, "desc"]],
    "processing": true,
    "autoWidth": false, // need this to handle rendering issues in bootstrap and during re-size.  Note handlers at end of page.
    "scrollY": "200px",  // make it a small scrolling table
    "scrollX": true,
    "paging": false,
    "info": false,
    "language": {
        "processing": '<span style="width:100%;"><img src="/Content/icons/ajax-loader-orange-med.gif" /></span>'
    },
    "searching": false
});

console.log in "success" gives me the following json array but it is not bound to the datatable

[{reference_id: '873', name: 'MapTest', details: 'Sourced from Open Street Maps', num_points: 0, num_sections: 23}, {reference_id: '899', name: 'Albury C roads', details: 'Sourced from Open Street Maps', num_points: 0, num_sections: 0}]

but it is not bound to the table what am I missing?

Update

By removing the success and error properties, data started binding..Why?

networkslisttab = $('#networkslisttable').DataTable({
    "ajax": {
        "url": networkstoolboxURL,
        "dataSrc": ''
        
    }             
    "columns": [
        {
            "data": 'reference_id',
            "width": '15%',
        },
        { "data": 'name' },
        {
            "data": 'num_points',
            "width": '15%',
        },
        {
            "data": 'num_sections',
            "width": '15%',
        }
        
    ],
    "order": [[0, "desc"]],
    "processing": true,
    "autoWidth": false, // need this to handle rendering issues in bootstrap and during re-size.  Note handlers at end of page.
    "scrollY": "200px",  // make it a small scrolling table
    "scrollX": true,
    "paging": false,
    "info": false,
    "language": {
        "processing": '<span style="width:100%;"><img src="/Content/icons/ajax-loader-orange-med.gif" /></span>'
    },
    "searching": false
});

enter image description here


Solution

As you have seen, you should not override the jQuery Ajax success option in your DataTables ajax option.

As documented here:

...the success option of ajax should not be altered - DataTables uses it internally to execute the table draw when the data load is complete.

Use the dataSrc option instead, for any custom processing you may want to do after receiving the JSON response via Ajax.


(I have not experimented with the error property of the DataTables ajax option - it may be the same situation as the success option. It's not mentioned in the documentation I linked to.)



Answered By - andrewJames
Answer Checked By - Katrina (PHPFixing Volunteer)
  • Share This:  
  •  Facebook
  •  Twitter
  •  Stumble
  •  Digg
Newer Post Older Post Home

0 Comments:

Post a Comment

Note: Only a member of this blog may post a comment.

Total Pageviews

1,209,867

Featured Post

Why Learn PHP Programming

Why Learn PHP Programming A widely-used open source scripting language PHP is one of the most popular programming languages in the world. It...

Subscribe To

Posts
Atom
Posts
Comments
Atom
Comments

Copyright © 2025 PHPFixing