Hello!
In this post, I would like to introduce a useful frontend plugin for GMS tool development.
You can refer to the following URL to check it out:
https://datatables.net/examples/styling/bootstrap.html
Below are screenshots from before and after applying it.
<Before application>
The photo above shows how about 2,000 test data points look when displayed without the plugin.
(If data keeps piling up in the future... it will be huge, right?)
Here is how it looks after applying the plugin.
You can organize and view data in sets of 10, 20, 50, or 100, search table rows using the Search function, and it provides pagination features.
If you have the desire to "implement it by hand" or have never implemented (pagination, entry limits, search) before, I recommend doing it yourself.
However, if you have already implemented it and it feels like repetitive grunt work, I think it is better to work comfortably using this plugin.
I will briefly summarize how to use it below.
I recommend using jQuery version 1.12 or higher. (I haven't tested lower versions. I mention this because the example site uses version 1.12. I personally used jQuery version 2.x.)
1. Download the files and apply the <script src=""></script> tags.
It should look like this:
Show more
<script src="http://code.jquery.com/jquery-2.1.4.js"></script>
<script src="dataTables.bootstrap.min.js"></script>
<script src="jquery.dataTables.min.js"></script>
2. Try calling the API.
Call it as follows:
$(
'#example'
).DataTable();
If you want to build everything from scratch, I recommend doing it at least once.
However, for those working in the industry who are short on time, I recommend using this.
(However, if you need more customization, then I recommend building it yourself.)
Experience using it — it is convenient.
Note: I have not tested browser compatibility. It works normally in Chrome 48.0 and above.