[bootstrap-table] transform html table to magic

[Costas]

reference : http://wenzhixin.net.cn/p/bootstrap-table/docs/documentation.html
the css

		<style>
			/*jquery.validate*/
			label.error { color: #FF0000; font-size: 11px; display: block; width: 100%; white-space: nowrap; float: none; margin: 8px 0 -8px 0; padding: 0!important; }
			
			/*bootstrap-table selected row*/
			.fixed-table-container tbody tr.selected td	{ background-color: #B0BED9; }
			
			/*progress*/
			.modal-backdrop { opacity: 0.7;	filter: alpha(opacity=70);	background: #fff; z-index: 2;}
			div.loading { position: fixed; margin: auto; top: 0; right: 0; bottom: 0; left: 0; width: 200px; height: 30px; z-index: 3; }
		</style>

the php

<?php
// include DB
require_once ('config.php');

$db             = connect();

$rows = null;
///////////////////READ Rows
$rows = getSet($db,"select offer_id, DATE_FORMAT(offer_date_rec,'%d-%m-%Y') as date_created, users.fullname as user from offers
left join users on users.user_id = offers.offer_seller_id
where company_id=? order by offer_date_rec DESC", array($_GET['id']));
///////////////////READ Rows

?>

the javascript

<script>
    $(function() {
					 ///////////////////////////////////////////////////////////// FILL rows grid
					 var jArray_rows =   <?php echo json_encode($rows); ?>;

					 var the_rows = "";
					 for (var i = 0; i < jArray_rows.length; i++)
					 {
					 	the_rows += "[TR][TD][/TD][TD]" + jArray_rows[i]["offer_id"] + "[/TD][TD]" + jArray_rows[i]["date_created"] + "[/TD]" +
					 	"[TD]" + jArray_rows[i]["user"] + "[/TD][/TR]";
					 }

					 //set the table rows
					 $("#tbl_rows").html(the_rows);
					 ///////////////////////////////////////////////////////////// FILL rows grid
					 
					 //transform html to magic!
					 $("#tbl").bootstrapTable();
					 
					 //edit button - get the record ID!
					 $('#btn_edit').on('click', function(e)
					 	{
					 		e.preventDefault();

					 		var row = $('#tbl').bootstrapTable('getSelections');

					 		if (row.length>0)
					 		{
					 			console.log(row[0].id);
					 		}
					 		else
								alert("Please select a row");
					 	})
						
	})				 
</script>

the html

		<div class="container">
		
			<button id="btn_edit" type="button" class="btn btn-primary">
				Edit
			</button>
				
			[TABLE]
				[TD]
					[TR]
						[TD][/TD]
						
						<!--here set the column name! later used to read the record ID proper-->
						[TD]ID[/TD]
						
						[TD]Created[/TD]
						[TD]Seller[/TD]
						[TD]Total Cost[/TD]
						[TD]Type[/TD]
					[/TR]
				

				<tbody id="tbl_rows">
			[/TABLE]
			
		</div>

in one page :

<?php
// include DB
require_once ('config.php');
 
$db             = connect();
 
$rows = null;
///////////////////READ Rows
$rows = getSet($db,"select offer_id, DATE_FORMAT(offer_date_rec,'%d-%m-%Y') as date_created, users.fullname as user from offers
left join users on users.user_id = offers.offer_seller_id
where company_id=? order by offer_date_rec DESC", array($_GET['id']));
///////////////////READ Rows
 
?>

		<style>
			/*jquery.validate*/
			label.error { color: #FF0000; font-size: 11px; display: block; width: 100%; white-space: nowrap; float: none; margin: 8px 0 -8px 0; padding: 0!important; }
			
			/*bootstrap-table selected row*/
			.fixed-table-container tbody tr.selected td	{ background-color: #B0BED9; }
			
			/*progress*/
			.modal-backdrop { opacity: 0.7;	filter: alpha(opacity=70);	background: #fff; z-index: 2;}
			div.loading { position: fixed; margin: auto; top: 0; right: 0; bottom: 0; left: 0; width: 200px; height: 30px; z-index: 3; }
		</style>

<script>
    $(function() {
					 ///////////////////////////////////////////////////////////// FILL rows grid
					 var jArray_rows =   <?php echo json_encode($rows); ?>;

					 var the_rows = "";
					 for (var i = 0; i < jArray_rows.length; i++)
					 {
					 	the_rows += "[TR][TD][/TD][TD]" + jArray_rows[i]["offer_id"] + "[/TD][TD]" + jArray_rows[i]["date_created"] + "[/TD]" +
					 	"[TD]" + jArray_rows[i]["user"] + "[/TD][/TR]";
					 }

					 //set the table rows
					 $("#tbl_rows").html(the_rows);
					 ///////////////////////////////////////////////////////////// FILL rows grid
					 
					 //transform html to magic!
					 $("#tbl").bootstrapTable();
					 
					 //edit button - get the record ID!
					 $('#btn_edit').on('click', function(e)
					 	{
					 		e.preventDefault();

					 		var row = $('#tbl').bootstrapTable('getSelections');

					 		if (row.length>0)
					 		{
					 			console.log(row[0].id);
					 		}
					 		else
								alert("Please select a row");
					 	})
						
	})				 
</script>

		<div class="container">
		
			<button id="btn_edit" type="button" class="btn btn-primary">
				Edit
			</button>
				
			[TABLE]
				[TD]
					[TR]
						[TD][/TD]
						
						<!--here set the column name! later used to read the record ID proper-->
						[TD]ID[/TD]
						
						[TD]Created[/TD]
						[TD]Seller[/TD]
					[/TR]
				

				<tbody id="tbl_rows">
			[/TABLE]
			
		</div>