BootStrap Datatable not loading in Modal popup

subu

I have a requirement to populate a Datatable in Modal on click button event . The modal empty every time. Please advise how to load the datatable. Below is the code of the datatable initialisation.

var table = $('#example1').DataTable( {
"processing": true,
"serverSide": true,
ajax: {
url: 'details/Details5.json',
dataSrc: "data"
},
columns: [
//data : response,
{ "data": "ProcessName" },
{ "data": "SubprocessCount" },
{ "data": "TotalActivityCount" },
{ "data": "MigrationEfforts" },
{ "data": "MapperCount" },
{ "data": "SOAPCall" },
{ "data": "RESTCalls" },
{ "data": "ProcessComplexity" }

kthorngren

Without seeing the page it would be impossible to guess what the problem might be. Please post a link to your page or a test case replicating the issue.
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

To troubleshoot you can start with these steps:

1. Check for errors in the browser's console
2. Use the browsers network inspector tool to verify the Ajax request and response to 'details/Details5.json' are correct
3. Use the Datatables debugger to collect information for the developers

Let us know what you find.

Kevin

subu

Hello kthorngren ,
Thanks for a quick response. My flow is as follows. on clikc
when details button is clicked a URL is called and the response is shown in the modal window. what are the additional processing steps needed apart from initializing the data table?

kthorngren

when details button is clicked a URL is called and the response is shown in the modal window.

How are you fetching the data? How are you displaying the data. Are you using the above Datatables code to display the modal or is that for the original table?

what are the additional processing steps needed apart from initializing the data table?

That depends on how you are doing the above. This set of examples shows different ways to initialize Datatables for different data sources. More information can be found in the Data docs.

Please provide more specifics of how you showing the data in the modal. Code snippets would be good. Or provide a test case so we can see what you have. Then we can provide more specific answers.

Kevin

subu

Hello,
when the details button is clicked we send the first column value to the back end to get more details. The details may go up to 100 rows. The response recieved is saved as a json file

below is the code snippet

$("#example tbody").delegate("tr", "click", function() {
  var firstCellText = $("td:first", this).text();
  alert(firstCellText);
  $("empModal").modal('show');
       $.ajax({
        //var ajaxurl = 'details.php?name='+firstCellText,
        url: 'details.php?name='+firstCellText,
        
        
    success : function(data) {
    var table4 = $('#example1').DataTable( {
        "ajax": {
            "url": "details/Details8.json",
            "dataSrc": "ProcessDetails"
        },
         columns: [
            //data : response,
         { "data": "ProcessName" },
        { "data": "SubprocessCount" },
        { "data": "TotalActivityCount" },
        { "data": "MigrationEfforts" },
        { "data": "MapperCount" },
        { "data": "SOAPCall" },
        { "data": "RESTCalls" },
        { "data": "ProcessComplexity" }
         ]         
     
    });
    
$('#example1').DataTable().ajax.reload();
     $('#empModal').modal('show');
       searching : false
        
    },
    
     complete:function(data){
    // Hide image container
    $("#modal1").hide();
   }

});

what additional steps needed to bind the datatable to the modal-body?

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

kthorngren

what additional steps needed to bind the datatable to the modal-body?

Does the modal body have a table with the ID example1?

Is this fetching the detail rows?

       $.ajax({
        //var ajaxurl = 'details.php?name='+firstCellText,
        url: 'details.php?name='+firstCellText,

Does data have the detail rows?

success : function(data) {

What is this fetching?

    var table4 = $('#example1').DataTable( {
        "ajax": {
            "url": "details/Details8.json",
            "dataSrc": "ProcessDetails"
        },

What are you trying to do with this code?

$('#example1').DataTable().ajax.reload();  // Don't need this
     $('#empModal').modal('show');  // You are already showing the modal above
       searching : false  //  Seems like this would give an error

What I would do is use

       $.ajax({
        //var ajaxurl = 'details.php?name='+firstCellText,
        url: 'details.php?name='+firstCellText,

to fetch and return the detail rows. Then use data to add the data to the Datatable and remove the ajax option.

If you still have problems the please explain exactly what happens:

• Does the modal appear?
• Do you get errors in the browser's console.
• Do the ajax requests respond with the correct data (use the browser's network inspector)?
• What is returned by the details.php?name='+firstCellText URL?
• What is returned by the details/Details8.json URL?

If you are unable to provide a link showing the problem then you will need to follow the steps your code takes to determine where the problem is. Unfortunately there are still a lot of questions that we don't know in order to help. Let us know what you find and maybe we can provide some guidance.

Kevin

subu

I am have uploaded the Modal window snapshot No table in it. No significant errors in the browser console

$('#example1').DataTable().ajax.reload();

I was trying to draw the table

What is returned by the details.php?name='+firstCellText URL?

we make another call to the backend and download the response to a json file to details folder

What is returned by the details/Details8.json URL?

detail rows in {
"ProcessDetails": [
{}
]
}
format
example1 table definition

colin

We're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

Cheers,

Colin

kthorngren

The screenshot helps to understand the actual problem. Based on that screenshot it looks like you have the table tag hidden. Since the Datatable info is showing Showing 1 to 2 of 2 entries that means your process is working. There is omething in the HTML of the modal thats not correct. If you are unable to solve it then, as Colin said, we will need a test case to help debug.

Kevin

subu

Hi Kevin,
the issue is resolved. show() was not added. Thanks for all the help