<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="row"> <div class="col-md-12"> <!-- Start table advanced --> <div class="panel panel-default shadow no-overflow"> <div class="panel-heading"> <div class="pull-left"> <h3 class="panel-title">Table Advanced</h3> </div> <div class="pull-right"> <div class="btn-group"> <button type="button" class="btn btn-sm dropdown-toggle tooltips" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" data-placement="top" data-title="Change language" data-original-title="" title=""> <i class="fa fa-globe"></i> <span class="text-language">English</span> </button> <div class="dropdown-menu dropdown-table-language pull-right bg-default"> <span class="dropdown-list tooltips flag-icon flag-icon-gb change-language" data-language="English" data-placement="top" data-title="English" data-original-title="" title=""></span> <span class="dropdown-list tooltips flag-icon flag-icon-id change-language" data-language="Indonesian" data-placement="top" data-title="Indonesian" data-original-title="" title=""></span> <span class="dropdown-list tooltips flag-icon flag-icon-af change-language" data-language="Afrikaans" data-placement="top" data-title="Africa" data-original-title="" title=""></span> <span class="dropdown-list tooltips flag-icon flag-icon-cn change-language" data-language="Chinese" data-placement="top" data-title="Chinese" data-original-title="" title=""></span> <span class="dropdown-list tooltips flag-icon flag-icon-de change-language" data-language="German" data-placement="top" data-title="Germany" data-original-title="" title=""></span> <span class="dropdown-list tooltips flag-icon flag-icon-fr change-language" data-language="French" data-placement="top" data-title="France" data-original-title="" title=""></span> <span class="dropdown-list tooltips flag-icon flag-icon-jp change-language" data-language="Japanese" data-placement="top" data-title="Japanese" data-original-title="" title=""></span> <span class="dropdown-list tooltips flag-icon flag-icon-es change-language" data-language="Spanish" data-placement="top" data-title="Spain" data-original-title="" title=""></span> <span class="dropdown-list tooltips flag-icon flag-icon-pt change-language" data-language="Portuguese" data-placement="top" data-title="Portugal" data-original-title="" title=""></span> <span class="dropdown-list tooltips flag-icon flag-icon-kr change-language" data-language="Korean" data-placement="top" data-title="Korea" data-original-title="" title=""></span> <span class="dropdown-list tooltips flag-icon flag-icon-it change-language" data-language="Italian" data-placement="top" data-title="Italy" data-original-title="" title=""></span> <span class="dropdown-list tooltips flag-icon flag-icon-in change-language" data-language="Hindi" data-placement="top" data-title="India" data-original-title="" title=""></span> </div> </div> <div class="btn-group"> <button type="button" class="btn btn-sm dropdown-toggle tooltips" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" data-placement="top" data-title="Change color" data-original-title="" title=""> <i class="fa fa-paint-brush"></i> </button> <div class="dropdown-menu pull-right dropdown-table-colors"> <span data-color="default" class="dropdown-list bg-default"> </span> <span data-color="primary" class="dropdown-list bg-primary"> </span> <span data-color="danger" class="dropdown-list bg-danger"> </span> <span data-color="success" class="dropdown-list bg-success"> </span> <span data-color="info" class="dropdown-list bg-info"> </span> <span data-color="warning" class="dropdown-list bg-warning"> </span> <span data-color="lilac" class="dropdown-list bg-lilac"> </span> <span data-color="inverse" class="dropdown-list bg-inverse"> </span> </div> </div> <div class="btn-group"> <button type="button" class="btn btn-sm dropdown-toggle tooltips" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" data-placement="top" data-title="Change column" data-original-title="" title=""> <i class="fa fa-columns"></i> </button> <ul class="dropdown-menu pull-right dropdown-toggle-column"> <li> <a href="javascript:void(0);" class="toggle-column" data-column="1"><i class="fa fa-check-circle-o"></i> Name</a> </li> <li> <a href="javascript:void(0);" class="toggle-column" data-column="2"><i class="fa fa-check-circle-o"></i> Position</a> </li> <li> <a href="javascript:void(0);" class="toggle-column" data-column="3"><i class="fa fa-check-circle-o"></i> Office</a> </li> <li> <a href="javascript:void(0);" class="toggle-column" data-column="4"><i class="fa fa-check-circle-o"></i> Extn.</a> </li> <li> <a href="javascript:void(0);" class="toggle-column" data-column="5"><i class="fa fa-check-circle-o"></i> Start Date</a> </li> <li> <a href="javascript:void(0);" class="toggle-column" data-column="6"><i class="fa fa-check-circle-o"></i> Salary</a> </li> </ul> </div> <button class="btn btn-sm" data-action="expand" data-toggle="tooltip" data-placement="top" data-title="Expand" data-original-title="" title=""><i class="fa fa-expand"></i></button> <button class="btn btn-sm" data-action="refresh" data-toggle="tooltip" data-placement="top" data-title="Refresh" data-original-title="" title=""><i class="fa fa-refresh"></i></button> <button class="btn btn-sm" data-action="collapse" data-toggle="tooltip" data-placement="top" data-title="Collapse" data-original-title="" title=""><i class="fa fa-angle-up"></i></button> </div> <div class="clearfix"></div> </div><!-- /.panel-heading --> <div class="panel-body no-padding"> <form id="frm-example" name="frm-example" action="javascript:void(0);" method="POST"> <div class="panel-body"> <div class="panel panel-default panel-table no-margin"> <div class="panel-body no-padding"> <div id="datatable-sample_wrapper" class="dataTables_wrapper form-inline"><div class="dt-buttons"><a class="dt-button buttons-collection" tabindex="0" aria-controls="datatable-sample"><span>Export</span></a></div><div class="dataTables_length" id="datatable-sample_length"><label><select name="datatable-sample_length" aria-controls="datatable-sample" class="form-control input-sm"><option value="5">5</option><option value="10">10</option><option value="25">25</option><option value="50">50</option><option value="100">100</option><option value="-1">All</option></select> records per page</label></div><div id="datatable-sample_filter" class="dataTables_filter"><label>Search:<input type="search" class="form-control input-sm" placeholder="" aria-controls="datatable-sample"></label></div><table id="datatable-sample" class="table table-default table-middle table-striped table-bordered table-condensed dataTable" role="grid" aria-describedby="datatable-sample_info"> <thead> <tr role="row"><th class="dt-body-center sorting_disabled" rowspan="1" colspan="1" aria-label=" "> <div class="ckbox ckbox-primary"> <input id="checkbox-all" type="checkbox" name="select_all" value="1" class="display-hide"> <label for="checkbox-all"></label> </div> </th><th class="sorting_asc" tabindex="0" aria-controls="datatable-sample" rowspan="1" colspan="1" aria-label="Name member: activate to sort column descending" aria-sort="ascending">Name member</th><th class="sorting_disabled" rowspan="1" colspan="1" aria-label="Position">Position</th><th class="sorting_disabled" rowspan="1" colspan="1" aria-label="Office">Office</th><th class="sorting" tabindex="0" aria-controls="datatable-sample" rowspan="1" colspan="1" aria-label="Extn.: activate to sort column ascending">Extn.</th><th class="sorting" tabindex="0" aria-controls="datatable-sample" rowspan="1" colspan="1" aria-label="Start date: activate to sort column ascending">Start date</th><th class="sorting" tabindex="0" aria-controls="datatable-sample" rowspan="1" colspan="1" aria-label="Salary: activate to sort column ascending">Salary</th><th class="text-center sorting_disabled" rowspan="1" colspan="1" aria-label="#">#</th></tr> </thead> <tfoot> <tr><th class="dt-body-center" rowspan="1" colspan="1"> </th><th rowspan="1" colspan="1">Name member</th><th rowspan="1" colspan="1">Position</th><th rowspan="1" colspan="1">Office</th><th rowspan="1" colspan="1">Age</th><th rowspan="1" colspan="1">Start date</th><th rowspan="1" colspan="1">Salary</th><th class="text-center" rowspan="1" colspan="1">#</th></tr> </tfoot> <tbody><tr role="row" class="odd"><td class=" dt-body-center"><div class="ckbox ckbox-primary"><input id="checkbox-item-5" type="checkbox" name="select_all" value="1" class="display-hide"><label for="checkbox-item-5"></label></div></td><td class="sorting_1">Airi Satou</td><td>Accountant</td><td>Tokyo</td><td>5407</td><td>2008/11/28</td><td>$162,700</td><td class=" text-center"><div class="btn-group"><button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="fa fa-cogs"></i></button><ul class="dropdown-menu pull-right"><li><a href="#" class="btn-view">View</a></li><li><a href="#" class="btn-edit">Edit</a></li><li role="separator" class="divider"></li><li><a href="#" class="btn-delete">Delete</a></li></ul></div></td></tr><tr role="row" class="even"><td class=" dt-body-center"><div class="ckbox ckbox-primary"><input id="checkbox-item-25" type="checkbox" name="select_all" value="1" class="display-hide"><label for="checkbox-item-25"></label></div></td><td class="sorting_1">Angelica Ramos</td><td>Chief Executive Officer (CEO)</td><td>London</td><td>5797</td><td>2009/10/09</td><td>$1,200,000</td><td class=" text-center"><div class="btn-group"><button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="fa fa-cogs"></i></button><ul class="dropdown-menu pull-right"><li><a href="#" class="btn-view">View</a></li><li><a href="#" class="btn-edit">Edit</a></li><li role="separator" class="divider"></li><li><a href="#" class="btn-delete">Delete</a></li></ul></div></td></tr><tr role="row" class="odd"><td class=" dt-body-center"><div class="ckbox ckbox-primary"><input id="checkbox-item-3" type="checkbox" name="select_all" value="1" class="display-hide"><label for="checkbox-item-3"></label></div></td><td class="sorting_1">Ashton Cox</td><td>Junior Technical Author</td><td>San Francisco</td><td>1562</td><td>2009/01/12</td><td>$86,000</td><td class=" text-center"><div class="btn-group"><button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="fa fa-cogs"></i></button><ul class="dropdown-menu pull-right"><li><a href="#" class="btn-view">View</a></li><li><a href="#" class="btn-edit">Edit</a></li><li role="separator" class="divider"></li><li><a href="#" class="btn-delete">Delete</a></li></ul></div></td></tr><tr role="row" class="even"><td class=" dt-body-center"><div class="ckbox ckbox-primary"><input id="checkbox-item-19" type="checkbox" name="select_all" value="1" class="display-hide"><label for="checkbox-item-19"></label></div></td><td class="sorting_1">Bradley Greer</td><td>Software Engineer</td><td>London</td><td>2558</td><td>2012/10/13</td><td>$132,000</td><td class=" text-center"><div class="btn-group"><button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="fa fa-cogs"></i></button><ul class="dropdown-menu pull-right"><li><a href="#" class="btn-view">View</a></li><li><a href="#" class="btn-edit">Edit</a></li><li role="separator" class="divider"></li><li><a href="#" class="btn-delete">Delete</a></li></ul></div></td></tr><tr role="row" class="odd"><td class=" dt-body-center"><div class="ckbox ckbox-primary"><input id="checkbox-item-28" type="checkbox" name="select_all" value="1" class="display-hide"><label for="checkbox-item-28"></label></div></td><td class="sorting_1">Brenden Wagner</td><td>Software Engineer</td><td>San Francisco</td><td>1314</td><td>2011/06/07</td><td>$206,850</td><td class=" text-center"><div class="btn-group"><button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="fa fa-cogs"></i></button><ul class="dropdown-menu pull-right"><li><a href="#" class="btn-view">View</a></li><li><a href="#" class="btn-edit">Edit</a></li><li role="separator" class="divider"></li><li><a href="#" class="btn-delete">Delete</a></li></ul></div></td></tr><tr role="row" class="even selected"><td class=" dt-body-center"><div class="ckbox ckbox-primary"><input id="checkbox-item-6" type="checkbox" name="select_all" value="1" class="display-hide"><label for="checkbox-item-6"></label></div></td><td class="sorting_1">Brielle Williamson</td><td>Integration Specialist</td><td>New York</td><td>4804</td><td>2012/12/02</td><td>$372,000</td><td class=" text-center"><div class="btn-group"><button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="fa fa-cogs"></i></button><ul class="dropdown-menu pull-right"><li><a href="#" class="btn-view">View</a></li><li><a href="#" class="btn-edit">Edit</a></li><li role="separator" class="divider"></li><li><a href="#" class="btn-delete">Delete</a></li></ul></div></td></tr><tr role="row" class="odd"><td class=" dt-body-center"><div class="ckbox ckbox-primary"><input id="checkbox-item-43" type="checkbox" name="select_all" value="1" class="display-hide"><label for="checkbox-item-43"></label></div></td><td class="sorting_1">Bruno Nash</td><td>Software Engineer</td><td>London</td><td>6222</td><td>2011/05/03</td><td>$163,500</td><td class=" text-center"><div class="btn-group"><button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="fa fa-cogs"></i></button><ul class="dropdown-menu pull-right"><li><a href="#" class="btn-view">View</a></li><li><a href="#" class="btn-edit">Edit</a></li><li role="separator" class="divider"></li><li><a href="#" class="btn-delete">Delete</a></li></ul></div></td></tr><tr role="row" class="even"><td class=" dt-body-center"><div class="ckbox ckbox-primary"><input id="checkbox-item-23" type="checkbox" name="select_all" value="1" class="display-hide"><label for="checkbox-item-23"></label></div></td><td class="sorting_1">Caesar Vance</td><td>Pre-Sales Support</td><td>New York</td><td>8330</td><td>2011/12/12</td><td>$106,450</td><td class=" text-center"><div class="btn-group"><button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="fa fa-cogs"></i></button><ul class="dropdown-menu pull-right"><li><a href="#" class="btn-view">View</a></li><li><a href="#" class="btn-edit">Edit</a></li><li role="separator" class="divider"></li><li><a href="#" class="btn-delete">Delete</a></li></ul></div></td></tr><tr role="row" class="odd"><td class=" dt-body-center"><div class="ckbox ckbox-primary"><input id="checkbox-item-51" type="checkbox" name="select_all" value="1" class="display-hide"><label for="checkbox-item-51"></label></div></td><td class="sorting_1">Cara Stevens</td><td>Sales Assistant</td><td>New York</td><td>3990</td><td>2011/12/06</td><td>$145,600</td><td class=" text-center"><div class="btn-group"><button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="fa fa-cogs"></i></button><ul class="dropdown-menu pull-right"><li><a href="#" class="btn-view">View</a></li><li><a href="#" class="btn-edit">Edit</a></li><li role="separator" class="divider"></li><li><a href="#" class="btn-delete">Delete</a></li></ul></div></td></tr><tr role="row" class="even"><td class=" dt-body-center"><div class="ckbox ckbox-primary"><input id="checkbox-item-4" type="checkbox" name="select_all" value="1" class="display-hide"><label for="checkbox-item-4"></label></div></td><td class="sorting_1">Cedric Kelly</td><td>Senior Javascript Developer</td><td>Edinburgh</td><td>6224</td><td>2012/03/29</td><td>$433,060</td><td class=" text-center"><div class="btn-group"><button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="fa fa-cogs"></i></button><ul class="dropdown-menu pull-right"><li><a href="#" class="btn-view">View</a></li><li><a href="#" class="btn-edit">Edit</a></li><li role="separator" class="divider"></li><li><a href="#" class="btn-delete">Delete</a></li></ul></div></td></tr></tbody></table><div class="dataTables_info" id="datatable-sample_info" role="status" aria-live="polite">Showing 1 to 10 of 57 entries<span class="select-info"><span class="select-item">1 row selected</span><span class="select-item"></span><span class="select-item"></span></span></div><div class="dataTables_paginate paging_full_numbers_no_ellipses" id="datatable-sample_paginate"><ul class="pagination"><li class="paginate_button first disabled" aria-controls="datatable-sample" tabindex="0" id="datatable-sample_first"><a href="#">First</a></li><li class="paginate_button previous disabled" aria-controls="datatable-sample" tabindex="0" id="datatable-sample_previous"><a href="#">Previous</a></li><li class="paginate_button active" aria-controls="datatable-sample" tabindex="0"><a href="#">1</a></li><li class="paginate_button " aria-controls="datatable-sample" tabindex="0"><a href="#">2</a></li><li class="paginate_button " aria-controls="datatable-sample" tabindex="0"><a href="#">3</a></li><li class="paginate_button " aria-controls="datatable-sample" tabindex="0"><a href="#">4</a></li><li class="paginate_button " aria-controls="datatable-sample" tabindex="0"><a href="#">5</a></li><li class="paginate_button " aria-controls="datatable-sample" tabindex="0"><a href="#">6</a></li><li class="paginate_button next" aria-controls="datatable-sample" tabindex="0" id="datatable-sample_next"><a href="#">Next</a></li><li class="paginate_button last" aria-controls="datatable-sample" tabindex="0" id="datatable-sample_last"><a href="#">Last</a></li></ul></div></div> </div> </div> </div><!-- /.panel-body --> <div class="panel-footer"> <p>Press <b>Submit</b> and check console for URL-encoded form data that would be submitted.</p> <p><button class="btn btn-success">Submit</button></p> <b>Data submitted to the server:</b> <br> <pre id="example-console" class="p-20"></pre> </div> </form> </div> </div><!-- /.panel --> <!--/ End table advanced --> </div><!-- /.col-md-12 --> </div> </div>