The search and pagination features of Bootstrap dataTable do not function properly when the data is being retrieved from an AJAX API response

Question

The search and pagination features of Bootstrap dataTable do not function properly when the data is being retrieved from an AJAX API response

Currently, I am in the process of developing an admin panel. While I have successfully loaded data from an Ajax API response into a bootstrap dataTable, I have encountered issues with the default search and pagination functionalities of the table.

"processing": true,
"serverSide": true

I attempted to initialize the table by using the above code snippet, but unfortunately, it did not rectify the problem.

My question is whether it is possible for the dataTable functionality to work as expected, following the defaults provided by Bootstrap dataTable.

In order to achieve this, I intend to undertake the following steps:

Step1: Create a form with a submit button.

Step2: Upon clicking the submit button, trigger an ajax call to retrieve JSON Data dynamically and populate the dataTable rows.

Step3:

$("#editable-sample").DataTable({ // what should I do here.});

Problem

The issue currently faced is that although the data is loading onto the page, the search box and pagination features are non-functional.

javascript ajax twitter-bootstrap datatable

Answer 1

Answer №1

Could you please provide the code you are working with?

Have you double-checked that your table meets all of the necessary prerequisites for dataTables to function properly? Here are a few key requirements:

Your table should contain both <thead> and <tbody> tags

Make sure your table has an id attribute that matches the one used in the sample launch script:

<table class="table table-bordered" id="dataTables-example">
 <script>
   $(document).ready(function() {
       $('#dataTables-example').dataTable();
   });
</script>

Answer 2

Could you please provide the code you are working with?

Have you double-checked that your table meets all of the necessary prerequisites for dataTables to function properly? Here are a few key requirements:

Your table should contain both <thead> and <tbody> tags

Make sure your table has an id attribute that matches the one used in the sample launch script:

<table class="table table-bordered" id="dataTables-example">
 <script>
   $(document).ready(function() {
       $('#dataTables-example').dataTable();
   });
</script>

Answer 3

Answer №2

datatables offers support for Ajax data sources in the form of objects, click here to learn more

Here is an example extracted from the official documentation of DataTables:

JS

$(document).ready(function() {
    $('#example').DataTable( {
        "ajax": "data/objects.txt", //
        "columns": [
            { "data": "name" },
            { "data": "position" },
            { "data": "office" },
            { "data": "extn" },
            { "data": "start_date" },
            { "data": "salary" }
        ]
    } );
} );

HTML

<table id="example" class="display" cellspacing="0" width="100%">
        <thead>
            <tr>
                <th>Name</th>
                <th>Position</th>
                <th>Office</th>
                <th>Extn.</th>
                <th>Start date</th>
                <th>Salary</th>
            </tr>
        </thead>

        <tfoot>
            <tr>
                <th>Name</th>
                <th>Position</th>
                <th>Office</th>
                <th>Extn.</th>
                <th>Start date</th>
                <th>Salary</th>
            </tr>
        </tfoot>
    </table>

AJAX

{
  "data": [
    {
      "name": "Tiger Nixon",
      "position": "System Architect",
      "salary": "$320,800",
      "start_date": "2011/04/25",
      "office": "Edinburgh",
      "extn": "5421"
    },
    {
      "name": "Donna Snider",
      "position": "Customer Support",
      "salary": "$112,000",
      "start_date": "2011/01/25",
      "office": "New York",
      "extn": "4226"
    }
  ]
}

Answer 4

datatables offers support for Ajax data sources in the form of objects, click here to learn more

Here is an example extracted from the official documentation of DataTables:

JS

$(document).ready(function() {
    $('#example').DataTable( {
        "ajax": "data/objects.txt", //
        "columns": [
            { "data": "name" },
            { "data": "position" },
            { "data": "office" },
            { "data": "extn" },
            { "data": "start_date" },
            { "data": "salary" }
        ]
    } );
} );

HTML

<table id="example" class="display" cellspacing="0" width="100%">
        <thead>
            <tr>
                <th>Name</th>
                <th>Position</th>
                <th>Office</th>
                <th>Extn.</th>
                <th>Start date</th>
                <th>Salary</th>
            </tr>
        </thead>

        <tfoot>
            <tr>
                <th>Name</th>
                <th>Position</th>
                <th>Office</th>
                <th>Extn.</th>
                <th>Start date</th>
                <th>Salary</th>
            </tr>
        </tfoot>
    </table>

AJAX

{
  "data": [
    {
      "name": "Tiger Nixon",
      "position": "System Architect",
      "salary": "$320,800",
      "start_date": "2011/04/25",
      "office": "Edinburgh",
      "extn": "5421"
    },
    {
      "name": "Donna Snider",
      "position": "Customer Support",
      "salary": "$112,000",
      "start_date": "2011/01/25",
      "office": "New York",
      "extn": "4226"
    }
  ]
}

Answer 5

Answer №3

$.ajax({..

 success: function(data) {..  

var table = $('#datatable').DataTable();
table.clear().draw();
var rowNode= new Array();
for (var key=0, size=data.length; key<size; key++){
            var j = -1;
            var r = new Array();
// storing data columns in an array
                r[++j] ='<tr><td><input type="hidden" name="somename1" value="'+data[key].id+'"/><input type="hidden" name="somename2" value="'+data[key].is_deleted+'"/>'+data[key].lic_category_name+'</td>';
                r[++j] = '<td>'+data[key].someval1+'</td>';
                r[++j] = '<td>'+ data[key].someval2+'</td>';
                r[++j] = '<td>'+ data[key].someval13+ '</td>';
                r[++j] ='<td class="last"><a href="view?id='+data[key].id+' title="View"><i class="fa fa-eye"></i></a> <a href="edit?id='+data[key].id+'title="Edit"><i class="fa fa-edit"></i></a> <a href="delete?id='+data[key].id+'onclick="return confirm("Are you sure you want to delete?")" title="Delete"><i class="fa fa-trash"></i></a></td></tr>'; 
                rowNode = table.row.add(r);

        }

        rowNode.draw().node()

   }
}

This is my JSON Response,

[{"id":70,"somekey1":"GC 1","somekey2":"GC 1","somekey3":8,"somekey4":5000,"somekey5":1,"somekey5":1,"is_deleted":0}]

The code worked successfully for my specific needs.

Answer 6

$.ajax({..

 success: function(data) {..  

var table = $('#datatable').DataTable();
table.clear().draw();
var rowNode= new Array();
for (var key=0, size=data.length; key<size; key++){
            var j = -1;
            var r = new Array();
// storing data columns in an array
                r[++j] ='<tr><td><input type="hidden" name="somename1" value="'+data[key].id+'"/><input type="hidden" name="somename2" value="'+data[key].is_deleted+'"/>'+data[key].lic_category_name+'</td>';
                r[++j] = '<td>'+data[key].someval1+'</td>';
                r[++j] = '<td>'+ data[key].someval2+'</td>';
                r[++j] = '<td>'+ data[key].someval13+ '</td>';
                r[++j] ='<td class="last"><a href="view?id='+data[key].id+' title="View"><i class="fa fa-eye"></i></a> <a href="edit?id='+data[key].id+'title="Edit"><i class="fa fa-edit"></i></a> <a href="delete?id='+data[key].id+'onclick="return confirm("Are you sure you want to delete?")" title="Delete"><i class="fa fa-trash"></i></a></td></tr>'; 
                rowNode = table.row.add(r);

        }

        rowNode.draw().node()

   }
}

This is my JSON Response,

[{"id":70,"somekey1":"GC 1","somekey2":"GC 1","somekey3":8,"somekey4":5000,"somekey5":1,"somekey5":1,"is_deleted":0}]

The code worked successfully for my specific needs.

Answer 7

Answer №4

The issue arose due to a conflict with the 'column' attribute attempting to match data row values with the column before retrieving the data.
So I decided to place the closing Curly bracket of the 'ajax' attribute before the 'column' attribute.
Now, the column attribute function will only be called after the ajax function is complete.

$(document).ready(function() {             
    $('#example').DataTable( {            
        "ajax":{ "data/objects.txt" },//<------------------------------------------------place here//            
        "columns": [                                                              
            { "data": "name" },             
            { "data": "position" },         
            { "data": "office" },        
            { "data": "extn" },           
            { "data": "start_date" },          
            { "data": "salary" }         
        ]          
    });  
} );

Answer 8

The issue arose due to a conflict with the 'column' attribute attempting to match data row values with the column before retrieving the data.
So I decided to place the closing Curly bracket of the 'ajax' attribute before the 'column' attribute.
Now, the column attribute function will only be called after the ajax function is complete.

$(document).ready(function() {             
    $('#example').DataTable( {            
        "ajax":{ "data/objects.txt" },//<------------------------------------------------place here//            
        "columns": [                                                              
            { "data": "name" },             
            { "data": "position" },         
            { "data": "office" },        
            { "data": "extn" },           
            { "data": "start_date" },          
            { "data": "salary" }         
        ]          
    });  
} );

The search and pagination features of Bootstrap dataTable do not function properly when the data is being retrieved from an AJAX API response

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

How to access an element through the router-outlet in Angular 6?

Retrieving saved data from LocalStorage upon page reload

I'm facing an issue where my React onClick event is not functioning as expected; whenever I click,

What is the best way to handle code versioning using Django, Angular2, and Webpack?

Prepare the data for parsing into a highcharts pie chart

What is the method for acquiring a dynamic segment in the router of a Next.js 13 application?

How can Vue.js pass an array from a child component to its parent component?

Understanding the process of sending data from a Cordova application to a PHP script and storing it in

Show or hide the sibling element of the current element without using a specific identifier in jQuery

Initiate an Ajax request solely for the elements currently visible on the screen

Tips for properly modifying an attribute within an array of objects in JavaScript using ReactJS

React, incorporating emojis within a dropdown menu

Using browserify "require" in console: A step-by-step guide

Blend express router by chaining the (.route) method with other HTTP methods like (.get, .post, etc) to create

TS type defined by JS constants

What is a common mistake when using refs in React?

What is the best way to use command line arguments within a Node.js script?

The function is missing from the object, leading to a script error with jQuery

Tips for maintaining consistent header and footer while developing the front end using JavaScript

Plane is constantly cloaked in darkness