Example code for filling Json data in Bootstrap, bootstrapjson

Example code for filling Json data in Bootstrap, bootstrapjson

This article describes how to populate Json data with Bootstrap, as follows:

I,

Ii. html code:

<% @ Page language = "java" pageEncoding = "UTF-8" contentType = "text/html; charset = UTF-8 "%> <div class =" content "> <div class =" table-responsive "> <div class =" container-fluid "> <div class =" row -fluid "> <form class =" form-inline well-known-sm "id =" monitor_form "role =" form "> <div class =" form-group pdate "> <label for = "date"> Start date: </label> <input type = "text" id = "startDate" name = "startDate" class = "form-control layer -Date "data-options =" editable: false, required: true "/> <I class =" iconfont "> warning </I> </div> <div class =" form-group pdate "> <label for =" date "> end Date: </label> <input type = "text" id = "endDate" name = "endDate" class = "form-control layer-date" data-options = "editable: false, required: true "/> <I class =" iconfont "> groups </I> </div> <div class =" form-group "> <a href =" javascript: void (0); "class =" button bPrimary "id =" iconsearch"> <I class = "iconfont"> </I> query </a> </div> </form> <div class = "col-xs-6 nospace"> <div class =" panel-default "> <div class =" panel-heading "> Statistical Chart </div> <div class =" panel-body "style =" border: 0px; ">  </div> <div class = "col-xs-6 nospace"> <div class = "panel-default"> <div class = "panel-heading"> Statistics </div> <div class = "panel -body nobo Rder "style =" border: 0px; "> <! -- <Table id = "monitor-table" class = "table-striped table-hover" data-mobile-responsive = "true"> </table> --> <table id = "monitor-table" class = "table-striped table-hover"> <thead> <tr> <th data-field = "item0"> data type </th> <th data-field = "item1"> process name </th> <th data-field = "item2"> value </th> </tr> </thead> </ table> </div>

Iii. js code:

<Script> var $ table = $ ("# monitor-table"); $ (function () {refFlushChart (); $ ("# iconsearch "). click (function () {refFlushChart () ;}); function refFlushChart () {var params =$ ("monitor_form "). serialize (); var url = "$ {ctx}/workflow/central! MonitorJPEG. action "; submitForm (params, url, function (data) {if (data. mess! = Null & data. mess. length> 0) {Comfirm. show ("prompt", data. mess) ;}$ ("# jpg_pdid "). attr ("src", data. imgUrl); // var dataObj = eval ("(" + JSON. stringify (data. dataGrid) + ")"); var dataObj = data. dataGrid; alert (dataObj. length); // $ table. bootstrapTable ('load', jQuery. parseJSON (data. dataGrid); $. each (dataObj, function (index, item) {var $ tr = $ ('<tr>'); $. each (item, function (name, val) {var $ td =$ ('<td> '0000.html (val); $ tr. append ($ td) ;}); $ table. append ($ tr );});});}

Iv. json data format:

{"State": 200, "mess": "", "startDate": "2016-10-04", "endDate": "2016-11-03", "imgUrl ": "/workflow/reportChart/201611/03/5e39452448594fe8a8579d1993029759.jpg", "dataGrid": [{"item0": "singular", "item1": "Application 1", "item2 ": "1" },{ "item0": "singular", "item1": "apply for 2", "item2": "15"}]}

The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.