How do I display server side json data in Bootstrap model table

Question

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.

My model table

<div class="modal fade" id="modalTable" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
               
            </div>
            <div class="modal-body">
                <table id="popupTable" class="table-nonfluid" data-toggle="table" data-height="450"     width="450">
                    <thead>
                        <tr>
                            <th class="col-xs-1" data-field="countryCode">Country Code</th>
                            <th class="col-xs-1" data-field="Number"> Number</th>
                            <th class="col-xs-2" data-field="errorMessage">Error Message</th>
                            <th class="col-xs-1" data-field="countryCode">Country Code</th>
                            <th class="col-xs-6" data-field="jobId"> job Id</th>
                            <th class="col-xs-2" data-field="organizationName">Organization Name</th>
                         </tr>
                    </thead>
                  
                </table>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>
        <!-- /.modal-content -->
    </div>
    <!-- /.modal-dialog -->
</div>
<!-- /.modal -->

I have a dataTabe like this

When I click on the number I should show me another table that is a popup. I have given the popup code on top.

This is the code when I click on numbers 121,2,72. it calls

{
														
data : "numbers",
	render : function(data,type, row) {
	var failureRespons=data.split("|");
	if(failureRespons[1]=='0')
      {   
      return failureRespons[1];
	  }
	else
	{
																														
	return '<a href="#" onclick="showFailureJobs('+failureRespons[0]+','+failureRespons[1]+')"  data-toggle="modal" data-target="#modalTable"><span class="text-primary">'+failureRespons[1]+'</span></a>'
																
	}															
}
}

Ajax call

	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"
							 	}
				 	        ]
				 	    });
				 	    })
				 	});
		

My json Data format

countryCode 		"NL"
Number 			    "4"
errorMessage 		"msg"
jobId 				"1"
organizationName 	"us"

update 1: html file content

<!DOCTYPE html>
<html lang="en">
	<title>
		Boostrap Modal Example
	</title>
	<head>
	<meta charset="utf-8">

		<script type="text/javascript" src="jquery.js"></script>
		<script type="text/javascript" src="bootstrap.js"></script>
		<link rel="stylesheet" type="text/css" href="bootstrap.css">

		<script type="text/javascript">
		  $(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"
			}
			        ]
    });
    })
});


		</script>

		<body>
    <!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#modalTable">
  Launch demo modal
</button>

<div class="modal fade" id="modalTable" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
               
            </div>
            <div class="modal-body">
<table id="table">
    <thead>
     <tr>
     <th class="col-xs-1" data-field="jobId">Job ID</th>
     <th class="col-xs-1" data-field="Number"> Number</th>
     <th class="col-xs-2" data-field="organizationName">Organization Name</th>
     <th class="col-xs-1" data-field="countryCode">Country Code</th>
     <th class="col-xs-6" data-field="errorMessage"> Error Message</th>
     </tr>
   </thead>
</table>
    </div>
       <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>
        <!-- /.modal-content -->
    </div>
    <!-- /.modal-dialog -->
</div>
<!-- /.modal -->

</body>

		
</html>

Answer 1

Update: New version - http://jsfiddle.net/1dwy3zx9/4/

---

You can load a datato table when modal shown:

$(document).ready(function() {

    var tempModalParameters = {
        jobId: null,
        jobCount: 0
    };

    $('.show-modal').click(function() {
        tempModalParameters.jobId = $(this).attr('data-jobId');
        tempModalParameters.jobCount = $(this).attr('data-jobCount');

        $('#modalTable').modal('show');
    });

    $('#modalTable').on('shown', function() {        
        $('#table').bootstrapTable({
            data: getFakeDataWithParameter(tempModalParameters.jobId,  tempModalParameters.jobCount)
        });

        $('#table').bootstrapTable('hideLoading');
    });


    function getFakeDataWithParameter(jobId, jobCount){   
        return [{
                "Number": "1",
                "countryCode": "NL",
                "errorMessage": "msg.",
                "jobId": "1",
                "organizationName": "us"
            }, {
                "Number": "2",
                "countryCode": "NL",
                "errorMessage": "msg",
                "jobId": "10",
                "organizationName": "us"
            }];

    }
});

You html should be like this:

<!-- Button trigger modal -->
<ul>
    <li><a href="#" class="show-modal" data-jobId="1" data-jobCount="2">1</a>
    <li><a href="#" class="show-modal" data-jobId="2" data-jobCount="2">2</a>
    <li><a href="#" class="show-modal" data-jobId="3" data-jobCount="2">3</a>
</ul>

<div class="modal fade" id="modalTable" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">

            </div>
            <div class="modal-body">

<table id="table">
    <thead>
                        <tr>
                            <th class="col-xs-1" data-field="jobId">Job ID</th>
                            <th class="col-xs-1" data-field="Number"> Number</th>
                            <th class="col-xs-2" data-field="organizationName">Organization Name</th>
                            <th class="col-xs-1" data-field="countryCode">Country Code</th>
                            <th class="col-xs-6" data-field="errorMessage"> Error Message</th>
                        </tr>
                    </thead>
</table>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>
        <!-- /.modal-content -->
    </div>
    <!-- /.modal-dialog -->
</div>
<!-- /.modal -->

And you need import a javascript for jQuery, Bootstrap and BootstrapTable (http://wenzhixin.net.cn/p/bootstrap-table/docs/getting-started.html)