DataTables tips using Laravel
September 06, 2020Datatable is a useful plugin for displaying data to table in more advance way. It provide search, filter, pagination, and sorting from the beginning you use it. But you usually don’t need all of the feature, or want to display button in the table, etc. Now I wanna share some tips in using datatable with Laravel.
Add button inside dataTable
When displaying data in a row, usually in the last column we want to add button for user to take action with the data e.g. button edit, and delete. But datatable not natively render html tag, so we need to use addColumn()
and rawColumns()
like this in controller:
1$data = DataTables::of($data)->addColumn('action', function($row) {
2return "<a href='/user/edit/1' class='btn btn-sm btn-success'>Edit</a><a href='/user/destroy/1' class='btn btn-sm btn-danger btn-delete'></i>Hapus</a>";
3})->rawColumns(['action']);
Load table on click
This case is usually when you have multiple datatable in one page and you organize it in tab view, you want to load data only when related tab is click. You can reload the table by using reload()
function to do that.
1$('#clickable_id').click(function() {
2$('#table').DataTable().ajax.reload();
3});
Disable Sorting and searching individual column
Datatable provide many feature to make a more useful table like searching, pagination, sorting, etc. But when you don’t want particular column searchable or sortable, you can disable it.
1columns: [
2{ data: 'name', searchable: false, orderable: false },
3]
That are some tips to use datatable with Laravel. Thank you for reading, if you have any more tips or question please drop it on comment.
🙌🏼Share this
📋More articles
Tools that I usually used as a Web Developer
For almost 2 years I have doing web developing as a job from designing landing page until write API for laravel-based web application in windows machine. Now I like to share my everyday tools for web developing that I usually used.
You can do these on Figma to work faster
Figma became popular these days to design a web/mobile user interface. That’s because Figma gives you more modern and reliable approach when come to performance, cloud storage, and collaboration. Now I wanna share with you how you can improve your designing process to work faster with Figma.
Kindle has changed my reading habits
Reading on a physical book and reading on a kindle give different experience. Those two things feel different when open the next page, highlights the text, holding it while reading, and so on. On this post, I wanna share with you what experiences that kindle will give to me compared to physical book.
Protect your form against spam bots
I was in the middle of embedding a third-party form on the website. The form snippet is just like the usual HTML form and the website is built using Next.js. At first, I thought it’s working well, fill the fields and submit it. But my team was told that we received various weird submissions with