Using datatables to display the icons gallery. There are currently icons available.
Clicking on an icon will copy the HTML for it to your clipboard.
Some info on this demo.
- The data for this demo appears in two related JSON datasets, one for the icons and the other for the keywords & categories. The second dataset was merged into the icons based on named keyword and category matching. There are potential issues doing this, and while it would be safer to work with a single dataset, this seemed like the only reasonable option.
- The buttons used in the demo are a mix of custom buttons for the display toggle between the datatable view and the icon grid view. The export buttons are included using the jszip and datatables buttons extension.
- Search/Filter has been modified to append a clear and search button
- Both views have been setup to be responsive, and the datatable controls have been adjusted to work in mobile. This was purely a CSS adjustment.
- Copy to Clipboard functionality is done using a custom call to the clipboard.js library.
- Postback position is retained and adjusted when the table reloads. This really isn't a problem on pages with only the datatable control, however longer pages seem to redirect to the bottom on pagination clicks. Ideally, this would be caught with a
.preventDefault()
on the anchors, however it wasn't working. More to do. - The Datatables library auto-filtering works great, however I don't believe it's 508 compliant. I added code on lines 167-172 to account for this.