❤️ Creative Tim Club - Access all our Present & Future Premium Products

Bootstrap Datagrid

Product description


Probably the most beautiful and complex bootstrap table you've ever seen on the internet, this bootstrap table is one of the essential plugins you will need.

Fresh Bootstrap Table comes with 5 colors and 2 versions: the first one only has a colored header and the second has the entire background colored. They all look great and we suggest you play around with all of them in the live preview to see which one fits you best.

Besides being beautiful, the table is fully functional and its wide range of actions are explained in the tutorial here (https://bootstrap-table.com). Please be sure to check it out if you think you need any extra functionality, everything is covered in the original Bootstrap repo (https://github.com/wenzhixin/bootstrap-table).

Hope you will enjoy using it in your next project. Happy coding!

Product certified by: Creative Tim
Fresh Bootstrap Table - Fully Coded and Responsive HTML5
Fresh Bootstrap Table - Crafted with Bootstrap - the most popular Front End Framework
Downloads
31,750
Version
1.2
Changelog
Updated
4 years ago
Released
8 years ago
Reviews
Star
Handcrafted Elements
0
Customized Plugins
0
Example Pages
0
Community Support
Documentation
Fully Responsive

We are here to help you!

61 Web Developers commented on this product

grafixartis
  • downloaded
8 years ago

@alexpaduraru @wenzhi Is __MACOSX folder required to be uploaded, too into the web host server or disregard all of it if I am using Windows? Sorry for being ignorant.

alexpaduraru
  • owner

No, anything that is with _ in front or ._DS can be ignored 100%. You can also make a test and see that everything is working fine if you upload or not those files. Good luck with development! :-)
8 years ago

grafixartis
  • downloaded

Thanks Sir! :) Follow-up: 1.) How can I add those little "up and down" arrow icons also for "Rank" column so that visitors can notice that the rows below can be sorted ascendingly and descendingly, too? 2.) How can I delete the "Actions" row? 3.) How can I add an additional column after "City"? 4.) How can I delete the "Alert" button? 5.) I tried on replacing the "Alert" button as a link for my social media account but the color of the link is not standing out or noticeable. I tried on creating links on table's columns after changing the names of the columns, too but the links are not automatically transforming to underlined links so that visitors can easily understand that they are links going to another websites or webpages. It just transform into a simple text with the same color. Where can I change the colors of the links automatically? 6.) The "Refresh" button on the upper right side is not working. If that will not really works, then I will just delete it. All other buttons like "Search", "Toggle", are fine though. 7.) How can I insert banner ads on the following places: a.) the header between the "Alert" and "Search" buttons; b.) inside the table rows or columns; and c.) on the footer between those number of pages settings and navigational page numbers. These are my concerns so far. I was able to try, test and modify other functionalities successfully.
8 years ago

alexpaduraru
  • owner

@grafixartis if you check the other columns you will see that there is an attribute data-sortable="true", so you just take that one and add where you want to have a sortable column. For the other questions, they are basic questions of HTML/CSS (colors, links, columns in table etc.) please check http://www.w3schools.com/html/html_tables.asp and http://www.w3schools.com/html/html_css.asp. For the other functionality of the table that you want to modify please use this link: http://bootstrap-table.wenzhixin.net.cn/documentation/. The refresh button is just for getting the information from a server using AJAX calls. Hope this help you.
8 years ago

ed.wrede
  • downloaded
8 years ago

Beautiful tables!! I'm trying to get them working in along with Angular but I'm not having any luck. Does anyone perhaps have an idea?

daniely.wright
  • downloaded

@ed.wrede I am also trying to get these tables working in an Angular application. Have you figured anything out?
8 years ago

carlos 8 years ago

Hi, first of all, great job. When I open the Live Preview, actions like,edit and remove, doesn't work, if I click 'Toggle', actions start to work, is that an expected behavior?

alexpaduraru
  • owner

Hi, we've been very busy in the last days with the launch of LBD PRO, now we got the fix thanks to another customer who use it. Please initialize the "window.operateEvents" object before you call the "$table.bootstrapTable". We will make this update also for the other users soon.
8 years ago

joseluis.f
  • downloaded
8 years ago

hi this is a great job. I have an issue when table load, if i click on Edit/Fav/Remove buttons they don't fire alert message, but if i click on next page and go back and click on Edit/Fav/Remove buttons again then works fine. What can be happening?

alexpaduraru
  • owner

@joseluis.f thank you for using our product. Sorry to hear that, we will check again the initialization of those buttons and come with a quick fix.
8 years ago

alexpaduraru
  • owner

@joseluis.f we've been very busy in the last days with the launch of LBD PRO, now got the fix thanks to another customer who use it. Please initialize the "window.operateEvents" object before you call the "$table.bootstrapTable". We will make this update also for the other users soon.
8 years ago

Сергей.Петрович 8 years ago

hi how I can administrated the table?

Tech.Austin
  • downloaded
8 years ago

Hey @alexpaduraru @wenzhi ! Great job, I love the table. However, I am getting some strange behaviour when trying to populate the table using php. All I am doing is echoing the "<tr><td></td><td></td></tr>" with some values inside the td's. But when I load the table it becomes the full height of the screen, and there is no more pagination, search, rows visible, or any of those options (except the alert on top left). Any idea why this is happening? Is there a better way to fill in the table data dynamically than echoing the table rows and table data? Thanks!

alexpaduraru
  • owner

@Tech.Austin thank you for using our product. It is supposed to work on that case too, can you give us a link to your website so we can verify what is happening? Please also check the browser console and make sure there are no errors in the initialization of the table. As a plan B, here is the original documentation: http://bootstrap-table.wenzhixin.net.cn/documentation/ you can load data through Ajax calls.
8 years ago

joseluis.f
  • downloaded

@Tech.Austin i am using it with with php and works fine (except for issue that i mentioned before). You should check if generated html code is clean and have begin/end tags correctly. Then you have to check included files, there is many files that you need. Check console debug for errors. Regards
8 years ago

Tech.Austin
  • downloaded

@alexpaduraru @joseluis.f Thanks for the quick reply! I am getting the following error from the console: "Uncaught TypeError: Cannot read property 'field' of undefined" on line 614 of bootstrap-table.js . When I look at the page source the html appears to be well-formed. I have to change a couple of things and I will post a link to the site shortly! Thanks again
8 years ago

joseluis.f
  • downloaded
8 years ago

@Tech.Austin hi again, check the included files, first you must load css files then jquery, bootstrap.. the order is very important. Check there is no 404 (file not found) messages. Other thing you must check is html code generated (but no running time). You can "echo" as a javascript message. sometimes browsers completes tags when something is missing and close it incorrectly.

joseluis.f
  • downloaded
8 years ago

@Tech.Austin Hi, now it works fine. Thanks for your time. Best regards.

joseluis.f
  • downloaded
8 years ago

@Tech.Austin one more question. It's possible to hide "id" field by default?. I mean, is needed for other things but is not necesary been visible for users

bhatiajitu
  • downloaded
8 years ago

Helloo is there any developer ?

You have to be logged in to post a comment. Login here.