[bootstrap-table] transform PHP recordset to magic!

[Costas]

[2014] bootstrap-table - v1.3

//test
<?php
	$db = connect();
	$recs = getSet($db,"select id,created,seller,total_cost,type from customers", null);
?>


<script>

	$(function() {
			///////////////////////////////////////////////////////////// FILL table
			var jArray_recs =   <?php echo json_encode($recs); ?>; //convert PHP variable to JSON

			//enumerate the records
			var tbl_recs = "";
			for (var i = 0; i < jArray_recs.length; i++)
			{
				tbl_recs += "[TR]" +
				"[TD]" + jArray_recs[i]["id"] + "[/TD]" + 
				"[TD]" + jArray_recs[i]["created"] + "[/TD]" +
				"[TD]" + jArray_recs[i]["seller"] + "[/TD]" + 
				"[TD]" + jArray_recs[i]["total_cost"] + "[/TD]"
				"[TD]" + jArray_recs[i]["type"] + "[/TD][/TR]";
			}

			$("#tbl_rows").html(tbl_recs); //set to table
			///////////////////////////////////////////////////////////// FILL table



			$("#tbl").bootstrapTable(); //transform to magic!
		})
		
</script>

[TABLE]
	[TD]
		[TR]
			[TD]ID[/TD]
			[TD]Created[/TD]
			[TD]Seller[/TD]
			[TD]Total Cost[/TD]
			[TD]Type[/TD]
		[/TR]
	

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

doc - http://bootstrap-table.wenzhixin.net.cn/documentation

---

//is invalid way to use data-sort-name on TH, but add it here coz
//return all data attributes with _date_data
//http://jsfiddle.net/e3nk137y/1434/
[TD]Date[/TD]

2021 - v1.18 - [bootstrap-table] use of child table

 

[Costas]

Datables v1.11.5 (compatible with IE11)

on 2025 at ASPClassic project tried jquery datatables (2021) using only those files (100kb) :

• jquery.dataTables.min.js
• jquery.dataTables.min.css
• images/sort*.png

example of multiselection grid

<table id="grid1" class="display compact nowrap">
    <thead>
        <tr>
            <th>ID</th>
            <th>First name</th>
            <th>Last name</th>
            <th>Score</th>
        </tr>
    </thead>
    <tbody>
        <% Response.Write GridRecordsetToTableRows(rs) %>
    </tbody>
</table>
    
<script>
    var Cols = {
        ID: 0,
        FirstName: 1,
        LastName: 2,
        Score: 3,
    };
 
    ////////////////// GRID INSTANTIATE
    var grid1 = $('#grid1').DataTable({
            paging: false, // Disable pagination
              //columnDefs: [{ width: '20%', targets: 3 }] // when class nowrap you cannot set the width
    });
 
    grid1.on('click', 'tbody tr', function (e) {  //enable rows selection
        e.currentTarget.classList.toggle('selected');
    });
 
    ////////////////// COMMON FUNCTIONS
    function GetSelected() {
        var selectedRows = grid1.rows('.selected').data()
        /* alert( JSON.stringify( grid1.rows('.selected').data()[0] ); */
        if (selectedRows.length==0)
        {
            alert("Παρακαλώ επιλέξτε κάποιες εγγραφές.")
            return;
        }
    
        var multiValue = "";
        for (var i=0; i < selectedRows.length ;i++){
            if (selectedRows[i][Cols.FirstName].indexOf('ERROR')>-1)
                errorValue = "YES";
            else
                errorValue = "";

            multiValue = multiValue + "#" + selectedRows[i][Cols.ID] + errorValue;
        }
    }
 
    function DownloadGridRows(){
        var txt = "";
    
        grid1.rows().every(function(rowIdx, tableLoop, rowLoop) {
            var data = this.data();

            for (var i = 0; i < data.length; i++) {
                txt = txt + data[i] + "\t"; // console.log('Row ' + rowIdx + ', Field ' + i + ': ' + data[i]);
            }
        
            txt = txt + "\n"
        });
    
        console.log(txt);
    }
</script>