======================= Requirement:
- Bootstrap 3+
- jQuery UI
- jQuery 1.7+
=======================
Example :
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- 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="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.min.js"></script>
<div class="container">
<div class="row">
<div class="col-md-12">
<?php
require_once 'transgrid/transgrid.php';
$grid = new TransGrid ();
$CONF ['table'] = 't_department';
$CONF ['editable'] = true;
$CONF ['field'] = array('department_id','department_name','department_status');
$CONF ['limit'] = 10;
$CONF ['edit_field'] = array('department_name','department_status');
$CONF ['insert_field'] = array('department_name','department_status');
$CONF ['search_field'] = array('department_name');
$CONF ['status_field'] = 'department_status';
$CONF ['tablehead'] = array('Department','Status');
$CONF ['title'] = 'Settings » Department';
$CONF ['sortable'] = true;
$CONF ['order_field'] = 'urutan';
echo $grid->CreateGrid($CONF);
?>
</div>
</div>
</div>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>