如何在 Bootstrap 模型表中显示服务器端 json 数据答案

【问题标题】：How do I display server side json data in Bootstrap model table如何在 Bootstrap 模型表中显示服务器端 json 数据
【发布时间】：2023-03-22 11:40:02
【问题描述】：

我正在尝试在引导模型表中显示 json 数据。通过 ajax 调用，我从数据库中提取数据，并且我的控制器以 json 格式返回数据。我试图将 json 数据填充到我的模型表中。我不知道怎么了。任何机构都可以帮助我。

我的模型表

<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 -->

我有一个这样的数据表

当我点击数字时，我应该向我显示另一个弹出表。我已经在上面给出了弹出代码。

这是我点击数字 121、2、72 时的代码。它调用

{
														
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 调用

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

我的 json 数据格式

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

更新 1： html 文件内容

<!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>

【问题讨论】：

I tried to populate the json data into my model table. I dont know whats wrong。你的问题到底是什么？
我无法在引导模型表中填充 json 数据
BootstrapTable 在表中工作而不是 div 。 modalTable id 属于 div ，而不是 table。您没有发布或编写打开模式的代码，也没有提供调用函数showFailureJobs的代码

标签： javascript jquery json twitter-bootstrap

【解决方案1】：

更新：新版本-http://jsfiddle.net/1dwy3zx9/4/

当模态显示时，您可以将数据加载到表中：

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

    }
});

你的html应该是这样的：

<!-- 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 -->

你需要为 jQuery、Bootstrap 和 BootstrapTable 导入一个 javascript (http://wenzhixin.net.cn/p/bootstrap-table/docs/getting-started.html)

【讨论】：

我不知道为什么我的pop没有被触发？？
首先我认为你必须将 $('#modalTable').bootstrapTable({ 更改为 $('#popupTable').bootstrapTable({
这是给你的 - 工作示例 - jsfiddle.net/1dwy3zx9/1 。显示模式时必须加载数据 - $('#modalTable').on('shown', function() { // 这里加载。例如，您有此代码
嗨，兄弟，我尝试了多种方法，但效果不佳。如前所述，我以同样的方式尝试过。现在我可以触发弹出表，但没有填充数据。
jsfiddle.net/1dwy3zx9/1 这是工作示例。 Loda data after show modal - $(document).ready(function() { $('#modalTable').on('shown', function() { // 这里是加载数据的代码