Showing Mysql Data To Html Tables With Many Options with Jquery And AdminLTE

Continuing my previous article ” Create Simple CRUD with Datatables, Jquery, and AdminLTE ” . The following article is a tutorial on a simple way of displaying the MySQL data into an HTML table with lots of options. Answering a question from a visitor named Eric , How to display data with filtering certain parameters into an HTML table. Okay, just started the following tutorials :

Tutorial showing MySQL data to HTML tables with many options with Jquery and AdminLTE

1. Create a database as in article And then, add new field as country in the customer table as shown below

Create Country Field On The Customer Tables

2. As the Bootstrap Framework, I use the AdminLTE theme, to get it please download it on the site AdminLTE.

3. Create a new file index.php and copy the following code :

<!DOCTYPE html>
 <meta charset="utf-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <title>AdminLTE 2 | Dashboard</title>
 <!-- Tell the browser to be responsive to screen width -->
 <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
 <!-- Bootstrap 3.3.5 -->
 <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
 <!-- Font Awesome -->
 <link rel="stylesheet" href="">
 <!-- Ionicons -->
 <link rel="stylesheet" href="">
 <!-- Theme style -->
 <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
 <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
 <!--[if lt IE 9]>
 <script src=""></script>
 <script src=""></script>
 <body >
 <div class="container" style="margin-top:30px">
 <h2>Showing Mysql Data to Tables BY certain parameter</h2>
 <div class="wrapper">
 <div class="row" style="margin-bottom:10px;">
 <div class="col-xs-6">
 <div class="form-group">
 <select id="cboclause" class="form-control">
 <option value="name">Name</option>
 <option value="country">Country</option>
 <div class="form-group">
 <label >Query</label>
 <input type="text" class="form-control" id="txtquery" placeholder="input text here">
 <div class="form-group">
 <button type="submit" id="btnsearch" class="btn btn-info pull-right">Do search</button>
 </div><!-- col-xs-3 -->
 <table id="table_cust" class="table table-striped table-bordered table-hover">
 <tr class="tableheader">
 <th style="width:40px">#</th>
 <th style="width:140px">Name</th>
 <th style="width:140px">Gender</th>
 <th style="width:140px">Country</th>
 <th style="width:140px">Phone</th>

 </div><!-- ./wrapper -->
 <!-- jQuery 2.1.4 -->
 <script src="plugins/jQuery/jQuery-2.1.4.min.js"></script>
 <!-- jQuery UI 1.11.4 -->
 <script src=""></script>
 <!-- Resolve conflict in jQuery UI tooltip with Bootstrap tooltip -->
 $.widget.bridge('uibutton', $.ui.button);
 <!-- Bootstrap 3.3.5 -->
 <script src="bootstrap/js/bootstrap.min.js"></script>
 <script type="text/javascript">
 var param = $("#cboclause").val();
 var valuex = $("#txtquery").val();
 var value = {
 param: param,
 url : "data.php",
 type: "POST",
 data : value,
 success: function(data, textStatus, jqXHR)
 var data = jQuery.parseJSON(data);
 $("#table_cust tbody").html(data.html);

 error: function(jqXHR, textStatus, errorThrown)
 informasi("gagal","Error : "+textStatus,"#infopanel");

4. Create a new PHP file as data.php and copy the following code :

$pwd=""; // change with your database password

$db = mysql_select_db($dbname,$link);
if(!$db) die("failed to connect to database.......");
$param = $_POST['param'];
$value = $_POST['valuex'];

$sql = "SELECT @rownum := @rownum + 1 AS urutan,t.*
	FROM customer t, (SELECT @rownum := 0) r where ".$param.' like "%'.$value.'%"';
$data = array();
while($r = mysql_fetch_assoc($query)) {
	$data[] = $r;
$html = '';
foreach ($data as $key) 
	$html .='
<tr class="tableheader">

<td style="widtd:40px">'.$key['urutan'].'</td>

<td style="widtd:140px">'.$key['name'].'</td>

<td style="widtd:140px">'.$key['gender'].'</td>

<td style="widtd:140px">'.$key['country'].'</td>

<td style="widtd:140px">'.$key['phone'].'</td>


'	;	
$datax =array();
$datax['html'] = $html;
echo json_encode($datax);

5. Please test on your browser and verify that the result is as shown below :

Showing Mysql Data To Tables By Many Options With JqueryAdminLTE

Very easy right, please modify to your liking. To get full source code above, please download at the following link (don’t forget to share this article on your social media to open the download link)

Thus article about showing MySQL data to HTML table with many options with Jquery and AdminLTE, hope useful

The following two tabs change content below.
This site is a personal Blog of Sigit Prasetya Nugroho, a Desktop developer and freelance web developer working in PHP, MySQL, WordPress.

Leave a Comment

Your email address will not be published.

Time limit is exhausted. Please reload CAPTCHA.