"Bootstrap Snippet for Datatable"
Bootstrap 3.3.0 Snippet by mohsinirshad

<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 ----------> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script src="http://getbootstrap.com/dist/js/bootstrap.min.js"></script> <div class="container"> <div class="row"> <div class="col-md-12"> <h4>Bootstrap Snipp for Datatable</h4> <div class="table-responsive"> <table id="mytable" class="table table-bordred table-striped"> <thead> <th><input type="checkbox" id="checkall" /></th> <th>First Name</th> <th>Last Name</th> <th>Address</th> <th>Email</th> <th>Contact</th> <th>Edit</th> <th>Delete</th> </thead> <tbody> <tr> <td><input type="checkbox" class="checkthis" /></td> <td>Mohsin</td> <td>Irshad</td> <td>CB 106/107 Street # 11 Wah Cantt Islamabad Pakistan</td> <td>isometric.mohsin@gmail.com</td> <td>+923335586757</td> <td><p data-placement="top" data-toggle="tooltip" title="Edit"><button class="btn btn-primary btn-xs" data-title="Edit" data-toggle="modal" data-target="#edit" ><span class="glyphicon glyphicon-pencil"></span></button></p></td> <td><p data-placement="top" data-toggle="tooltip" title="Delete"><button class="btn btn-danger btn-xs" data-title="Delete" data-toggle="modal" data-target="#delete" ><span class="glyphicon glyphicon-trash"></span></button></p></td> </tr> <tr> <td><input type="checkbox" class="checkthis" /></td> <td>Mohsin</td> <td>Irshad</td> <td>CB 106/107 Street # 11 Wah Cantt Islamabad Pakistan</td> <td>isometric.mohsin@gmail.com</td> <td>+923335586757</td> <td><p data-placement="top" data-toggle="tooltip" title="Edit"><button class="btn btn-primary btn-xs" data-title="Edit" data-toggle="modal" data-target="#edit" ><span class="glyphicon glyphicon-pencil"></span></button></p></td> <td><p data-placement="top" data-toggle="tooltip" title="Delete"><button class="btn btn-danger btn-xs" data-title="Delete" data-toggle="modal" data-target="#delete" ><span class="glyphicon glyphicon-trash"></span></button></p></td> </tr> <tr> <td><input type="checkbox" class="checkthis" /></td> <td>Mohsin</td> <td>Irshad</td> <td>CB 106/107 Street # 11 Wah Cantt Islamabad Pakistan</td> <td>isometric.mohsin@gmail.com</td> <td>+923335586757</td> <td><p data-placement="top" data-toggle="tooltip" title="Edit"><button class="btn btn-primary btn-xs" data-title="Edit" data-toggle="modal" data-target="#edit" ><span class="glyphicon glyphicon-pencil"></span></button></p></td> <td><p data-placement="top" data-toggle="tooltip" title="Delete"><button class="btn btn-danger btn-xs" data-title="Delete" data-toggle="modal" data-target="#delete" ><span class="glyphicon glyphicon-trash"></span></button></p></td> </tr> <tr> <td><input type="checkbox" class="checkthis" /></td> <td>Mohsin</td> <td>Irshad</td> <td>CB 106/107 Street # 11 Wah Cantt Islamabad Pakistan</td> <td>isometric.mohsin@gmail.com</td> <td>+923335586757</td> <td><p data-placement="top" data-toggle="tooltip" title="Edit"><button class="btn btn-primary btn-xs" data-title="Edit" data-toggle="modal" data-target="#edit" ><span class="glyphicon glyphicon-pencil"></span></button></p></td> <td><p data-placement="top" data-toggle="tooltip" title="Delete"><button class="btn btn-danger btn-xs" data-title="Delete" data-toggle="modal" data-target="#delete" ><span class="glyphicon glyphicon-trash"></span></button></p></td> </tr> <tr> <td><input type="checkbox" class="checkthis" /></td> <td>Mohsin</td> <td>Irshad</td> <td>CB 106/107 Street # 11 Wah Cantt Islamabad Pakistan</td> <td>isometric.mohsin@gmail.com</td> <td>+923335586757</td> <td><p data-placement="top" data-toggle="tooltip" title="Edit"><button class="btn btn-primary btn-xs" data-title="Edit" data-toggle="modal" data-target="#edit" ><span class="glyphicon glyphicon-pencil"></span></button></p></td> <td><p data-placement="top" data-toggle="tooltip" title="Delete"><button class="btn btn-danger btn-xs" data-title="Delete" data-toggle="modal" data-target="#delete" ><span class="glyphicon glyphicon-trash"></span></button></p></td> </tr> </tbody> </table> <div class="clearfix"></div> <ul class="pagination pull-right"> <li class="disabled"><a href="#"><span class="glyphicon glyphicon-chevron-left"></span></a></li> <li class="active"><a href="#">1</a></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> <li><a href="#">4</a></li> <li><a href="#">5</a></li> <li><a href="#"><span class="glyphicon glyphicon-chevron-right"></span></a></li> </ul> </div> </div> </div> </div> <div class="modal fade" id="edit" tabindex="-1" role="dialog" aria-labelledby="edit" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span></button> <h4 class="modal-title custom_align" id="Heading">Edit Your Detail</h4> </div> <div class="modal-body"> <div class="form-group"> <input class="form-control " type="text" placeholder="Mohsin"> </div> <div class="form-group"> <input class="form-control " type="text" placeholder="Irshad"> </div> <div class="form-group"> <textarea rows="2" class="form-control" placeholder="CB 106/107 Street # 11 Wah Cantt Islamabad Pakistan"></textarea> </div> </div> <div class="modal-footer "> <button type="button" class="btn btn-warning btn-lg" style="width: 100%;"><span class="glyphicon glyphicon-ok-sign"></span> Update</button> </div> </div> <!-- /.modal-content --> </div> <!-- /.modal-dialog --> </div> <div class="modal fade" id="delete" tabindex="-1" role="dialog" aria-labelledby="edit" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span></button> <h4 class="modal-title custom_align" id="Heading">Delete this entry</h4> </div> <div class="modal-body"> <div class="alert alert-danger"><span class="glyphicon glyphicon-warning-sign"></span> Are you sure you want to delete this Record?</div> </div> <div class="modal-footer "> <button type="button" class="btn btn-success" ><span class="glyphicon glyphicon-ok-sign"></span> Yes</button> <button type="button" class="btn btn-default" data-dismiss="modal"><span class="glyphicon glyphicon-remove"></span> No</button> </div> </div> <!-- /.modal-content --> </div> <!-- /.modal-dialog --> </div>
$(document).ready(function(){ $("#mytable #checkall").click(function () { if ($("#mytable #checkall").is(':checked')) { $("#mytable input[type=checkbox]").each(function () { $(this).prop("checked", true); }); } else { $("#mytable input[type=checkbox]").each(function () { $(this).prop("checked", false); }); } }); $("[data-toggle=tooltip]").tooltip(); });

Related: See More


Questions / Comments:

e

xhat007 (1) - 2 years ago - Reply 0


hi, can someone help me with the code to delete all the selected fields?

Moe alhakeem () - 6 years ago - Reply 0


e

xhat007 (1) - 2 years ago - Reply 0


Excellent. This is what I was searching for days. One features can be added as: when checkbox are selected, give user bulk action button at the bottom of the table. I am going to integrate in on my website. www.geonepal.com. Thanks Cheers.

vijayrana () - 6 years ago - Reply 0


e

xhat007 (1) - 2 years ago - Reply 0


I Just took the HTML Code and its perfectly fine. But the problem There is no styles. How can i fix this and how to call js file

Mohan () - 7 years ago - Reply 0


e

xhat007 (1) - 2 years ago - Reply 0


how to download that code?

Dwi Ahmad () - 8 years ago - Reply 0


e

xhat007 (1) - 2 years ago - Reply 0


how can i plus another element, eg Room, building without spoiling graphics.. i add items, but the grafics spoiling

Elias Konstantinou () - 8 years ago - Reply 0


e

xhat007 (1) - 2 years ago - Reply 0


Hi All,
This is a good tutorial.
You can find best Bootstrap Datatable With Add Edit Remove option In Php Mysql and Ajax
http://www.discussdesk.com/...

mksingh () - 8 years ago - Reply 0


e

xhat007 (1) - 2 years ago - Reply 0


Thanks ! Realy helpful for me. :)

Philip Zu () - 8 years ago - Reply 0


e

xhat007 (1) - 2 years ago - Reply 0


hi

Luis Felipe Dos Santos () - 8 years ago - Reply 0


e

xhat007 (1) - 2 years ago - Reply 0


how do i make the pagination work? when i load a query result of about 30 rows, how do i paginate them?

eldrin goks () - 8 years ago - Reply 0


e

xhat007 (1) - 2 years ago - Reply 0


i have a problem while running this code. the edit and delete model dialog is always in fade mode and also the script which you used here is available in bootstrap folder or not? . please help me on this.

shebee () - 9 years ago - Reply 0


e

xhat007 (1) - 2 years ago - Reply 0


same thing happened to me. any solutions?

s6xty () - 8 years ago - Reply 0


e

xhat007 (1) - 2 years ago - Reply 0


how can i implement it in codeigniter ?

freddy () - 9 years ago - Reply 0


e

xhat007 (1) - 2 years ago - Reply 0


my snippet was helpful ?..... I have update the code with new things of bootstrap.

Mohsin Gfx () - 9 years ago - Reply 0


e

xhat007 (1) - 2 years ago - Reply 0


hey mate, when i copy paste this- and when i click the edit button it can't show pop up window and also delete one too,

shebe () - 9 years ago - Reply 0


e

xhat007 (1) - 2 years ago - Reply 0


Hi,
i have some problems with your table, when i click on the edit button or the delete one i have no access to the form to introduce and modify the informations any solutions please !
thanks.

Yassine Benabderrahmane () - 9 years ago - Reply 0


e

xhat007 (1) - 2 years ago - Reply 0


This demo is just for showing bootstrap css+html+javascript files. This demo doesn't handle php operations which you want to accomplish. You should download datatable with server-side codes. And than you will have option to integrate this code snippet to datatable. Hope this helps. And final note: This website stands for bootstrap snippets that means you can find css+html and maybe javascript codes right here. You can't find any server-side scripts here like php or asp. Yeah I love bootsnipp :)

Average Joe () - 9 years ago - Reply 0


e

xhat007 (1) - 2 years ago - Reply 0


First off, thanks for the share. I have a problem downloading the tooltip.js and modal.js files... "http://templateplanet.info/..." does not exist. So my edit and delete buttons are non responsive... please could you tell me where i could find these files...? Thanks in advance.

Jacques () - 9 years ago - Reply 0


you can found them on GitHub by searching on Google

Yassine Benabderrahmane () - 9 years ago - Reply 1


e

xhat007 (1) - 2 years ago - Reply 0


e

xhat007 (1) - 2 years ago - Reply 0


Check now I have upload tooltip.js and modal.js ..... now demo is working.

Mohsin Irshad () - 9 years ago - Reply 0


e

xhat007 (1) - 2 years ago - Reply 0


(I copy and paste your code)
Why I can't use button edit and delete..then i click it no pop up show..where i should fix it
help me please.
thanks

souphaxay () - 9 years ago - Reply 0


e

xhat007 (1) - 2 years ago - Reply 0


You probably don't have the Javascript for Bootstrap (make sure you have JQuery and Bootstrap javascript)

maxsurguy () - 9 years ago - Reply 0


e

xhat007 (1) - 2 years ago - Reply 0


First of all, paste your code on http://jsfiddle.net/ and share it here, that would make everything easier.

Alex () - 9 years ago - Reply 0


e

xhat007 (1) - 2 years ago - Reply 0


yes..I paste it on http://jsfiddle.net/ for test.But this code can't show pop up when i click button edit and delete

souphaxay () - 9 years ago - Reply 0


e

xhat007 (1) - 2 years ago - Reply 0


I can not help you if you don't understand me properly. What is your native language?

Alex () - 9 years ago - Reply 0


e

xhat007 (1) - 2 years ago - Reply 0