title: How do I display server side json data in Bootstrap model table
body: <p>I am trying to display json data in bootstrap model  table.
  with ajax call I am puling the data from database and my controller returns the data in json format. 
  I tried to populate the json data into my model table.
  I dont know whats wrong. Can any body help me in this. </p>
  
  <p><strong>My model table</strong></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="modal fade" id="modalTable" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"&gt;
      &lt;div class="modal-dialog"&gt;
          &lt;div class="modal-content"&gt;
              &lt;div class="modal-header"&gt;
                 
              &lt;/div&gt;
              &lt;div class="modal-body"&gt;
                  &lt;table id="popupTable" class="table-nonfluid" data-toggle="table" data-height="450"     width="450"&gt;
                      &lt;thead&gt;
                          &lt;tr&gt;
                              &lt;th class="col-xs-1" data-field="countryCode"&gt;Country Code&lt;/th&gt;
                              &lt;th class="col-xs-1" data-field="Number"&gt; Number&lt;/th&gt;
                              &lt;th class="col-xs-2" data-field="errorMessage"&gt;Error Message&lt;/th&gt;
                              &lt;th class="col-xs-1" data-field="countryCode"&gt;Country Code&lt;/th&gt;
                              &lt;th class="col-xs-6" data-field="jobId"&gt; job Id&lt;/th&gt;
                              &lt;th class="col-xs-2" data-field="organizationName"&gt;Organization Name&lt;/th&gt;
                           &lt;/tr&gt;
                      &lt;/thead&gt;
                    
                  &lt;/table&gt;
              &lt;/div&gt;
              &lt;div class="modal-footer"&gt;
                  &lt;button type="button" class="btn btn-default" data-dismiss="modal"&gt;Close&lt;/button&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;!-- /.modal-content --&gt;
      &lt;/div&gt;
      &lt;!-- /.modal-dialog --&gt;
  &lt;/div&gt;
  &lt;!-- /.modal --&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><strong>I have a dataTabe like this</strong><a href="https://i.stack.imgur.com/gFLig.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/gFLig.jpg" alt="enter image description here"></a></p>
  
  <p>When I click on the number I should show me another table that is a popup. I have given the popup code on top.</p>
  
  <p>This is the code when I click on numbers 121,2,72. it calls</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>{
                
  data : "numbers",
   render : function(data,type, row) {
   var failureRespons=data.split("|");
   if(failureRespons[1]=='0')
        {   
        return failureRespons[1];
     }
   else
   {
                                
   return '&lt;a href="#" onclick="showFailureJobs('+failureRespons[0]+','+failureRespons[1]+')"  data-toggle="modal" data-target="#modalTable"&gt;&lt;span class="text-primary"&gt;'+failureRespons[1]+'&lt;/span&gt;&lt;/a&gt;'
                  
   }               
  }
  }</code></pre>
  </div>
  </div>
  </p>
  
  <p><strong>Ajax call</strong></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code> function showFailureJobs(jobId,jobCount)
   {
  
     $.ajax({
     type : "GET",
     url : url bla bla,
     data : '',
     dataType : "json",
        contentType: "application/json",
        crossDomain:true,
     success : function(data) { 
     
       $('#modalTable').on('shown', function() {
             
         $('#popupTable').bootstrapTable({
            columns: [{
                    field: 'countryCode',
                    title: 'Country Code'
                }, {
                    field: 'Number',
                    title: 'Number'
                }, {
                    field: 'errorMessage',
                    title: 'Error Message'
                }, {
                    field: 'jobId',
                    title: 'Job Id'
                },{
               
                    field: 'organizationName',
                    title: 'Organization Name'
                }, 
  
            ], 
            
        data:data
           
         });
       
         })   
         //Even I harcoded the data like this but I am not getting the data in table
       $(document).ready(function() {
            $('#modalTable').on('shown', function() {
                $('#popupTable').bootstrapTable({
                data: [
           {
             "countryCode" : "1",
             "Number" : "NL",
             "errorMessage" : "msg.",
             "jobId" : "1",
             "organizationName" : "us"
           },
           {
             "countryCode" : "2",
             "Number" : "NL",
             "errorMessage" : "msg",
             "jobId" : "10",
             "organizationName" : "us"
           }
                ]
            });
            })
        });
    </code></pre>
  </div>
  </div>
  </p>
  
  <p><strong>My json Data format</strong></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>countryCode   "NL"
  Number        "4"
  errorMessage   "msg"
  jobId     "1"
  organizationName  "us"</code></pre>
  </div>
  </div>
  
  <strong>update 1:</strong> 
  <strong>html file content</strong></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
   &lt;title&gt;
    Boostrap Modal Example
   &lt;/title&gt;
   &lt;head&gt;
   &lt;meta charset="utf-8"&gt;
  
    &lt;script type="text/javascript" src="jquery.js"&gt;&lt;/script&gt;
    &lt;script type="text/javascript" src="bootstrap.js"&gt;&lt;/script&gt;
    &lt;link rel="stylesheet" type="text/css" href="bootstrap.css"&gt;
  
    &lt;script type="text/javascript"&gt;
      $(document).ready(function() {
              $('#modalTable').on('shown', function() {
                  $('#table').bootstrapTable({
                    
     data: [
      {
       "Number" : "1",
       "countryCode" : "NL",
       "errorMessage" : "msg.",
       "jobId" : "1",
       "organizationName" : "us"
     },
     {
       "Number" : "2",
       "countryCode" : "NL",
       "errorMessage" : "msg",
       "jobId" : "10",
       "organizationName" : "us"
     }
             ]
      });
      })
  });
  
  
    &lt;/script&gt;
  
    &lt;body&gt;
      &lt;!-- Button trigger modal --&gt;
  &lt;button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#modalTable"&gt;
    Launch demo modal
  &lt;/button&gt;
  
  &lt;div class="modal fade" id="modalTable" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"&gt;
      &lt;div class="modal-dialog"&gt;
          &lt;div class="modal-content"&gt;
              &lt;div class="modal-header"&gt;
                 
              &lt;/div&gt;
              &lt;div class="modal-body"&gt;
  &lt;table id="table"&gt;
      &lt;thead&gt;
       &lt;tr&gt;
       &lt;th class="col-xs-1" data-field="jobId"&gt;Job ID&lt;/th&gt;
       &lt;th class="col-xs-1" data-field="Number"&gt; Number&lt;/th&gt;
       &lt;th class="col-xs-2" data-field="organizationName"&gt;Organization Name&lt;/th&gt;
       &lt;th class="col-xs-1" data-field="countryCode"&gt;Country Code&lt;/th&gt;
       &lt;th class="col-xs-6" data-field="errorMessage"&gt; Error Message&lt;/th&gt;
       &lt;/tr&gt;
     &lt;/thead&gt;
  &lt;/table&gt;
      &lt;/div&gt;
         &lt;div class="modal-footer"&gt;
          &lt;button type="button" class="btn btn-default" data-dismiss="modal"&gt;Close&lt;/button&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;!-- /.modal-content --&gt;
      &lt;/div&gt;
      &lt;!-- /.modal-dialog --&gt;
  &lt;/div&gt;
  &lt;!-- /.modal --&gt;
  
  &lt;/body&gt;
  
    
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>