Access all tutorials in sprocket icon.
Published May 9, 2016 by Bill Keck.
I’ve been working on ViewMaker, which is a free plugin for Laravel artisan, and one of my main objectives with the make:foundation command was to stand up a working datagrid that was fed by an ajax call with Laravel.
I worked really hard to make a paginated set of data results that has column sorts and complete control over the pagination. The pagination navigation features a page by page link, previous and next buttons that only show when appropriate, first and last buttons, and a go to page input and button.
I also added an ajax-powered search box that queries on a keyup event. This produces column sortable, paginated results as well. All of this is done with vue.js, which is a javascript library that many Laravel developers are using these days.
One of the things I really struggled with was I couldn’t find a working example to follow. Luckily, I had bought The Majesty of View recently, which is an excellent book on vue. The book is really great for getting started with vue, but it wasn’t explicit enough with its pagination example for me to use it for my laravel datagrid.
Instead I used the datagrid example on vuejs.org as a starting point and built it up from there. Truth be told, I hit up one or two of the enterprise developers at work for some hints too, since I’m relatively new with vue. There’s nothing quite like working on a datagrid to move your js skills along.
Since I followed the datagrid from the vue.js example, I built it with a component, so this was a real crash course in vue.js. You can check out my work by installing the ViewMaker plugin, which will let you create a working version of the datagrid, along with the api controller and everything else you need in under a minute. Check out the docs on ViewMaker if you want to learn how to do that.
I’m going to do a deep dive tutorial on all this, which will probably appear in one of my books, since it’s too much for this blog and wordpress doesn’t let me publish js code snippets.
If you do play with ViewMaker’s datagrid, keep in mind that you need to run vue.js not vue.min.js, otherwise you don’t get important warnings and error messages. Also Chrome has a dev tools plugin for vue, but you also need to be using the not minified version to use that.
I’m going to be building more features into ViewMaker, which I will be announcing on this blog. My goal is to make ViewMaker an artisan plugin that you can’t live without.
Click on the sprocket icon at the top of the page to see all my Laravel articles and tutorials. Please comment, share, like and review if you can, thanks.
I don’t have a donate button, but If you would like to support my work and learn more about Laravel, you can do so by buying one of my books, Laraboot: laravel 5.2 For Beginners, I really appreciate it.
Laravel Tips 