Answers

• kthorngren Posts: 21,443Questions: 26Answers: 4,974

  June 2020

  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 Posts: 5Questions: 1Answers: 0

  June 2020

  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 Posts: 21,443Questions: 26Answers: 4,974

  June 2020

  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 Posts: 5Questions: 1Answers: 0

  June 2020 edited June 2020

  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 Posts: 21,443Questions: 26Answers: 4,974

  June 2020 edited June 2020

  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 Posts: 5Questions: 1Answers: 0

  June 2020

  

  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 Posts: 15,240Questions: 1Answers: 2,599

  June 2020

  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 Posts: 21,443Questions: 26Answers: 4,974

  June 2020

  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 Posts: 5Questions: 1Answers: 0

  June 2020

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