I now have the DataTable plugin working OK to display "Show # entries" dropdown with very minimal effort or coding required. The following applies to Appgini V5.40+ which now includes header-extras.php in the hooks file (see notes below).
To achieve this result below, 2 x files require very minor editing:
- screenshot2.jpg (85.73 KiB) Viewed 28720 times
1. In datalist.php, find this piece of code and add an id to your table (in this case I added: id="projectname")
Code: Select all
// begin table and display table title
if(!$this->HideTableView && !($dvprint_x && $this->AllowSelection && $SelectedID) && !$PrintDV && !$Embedded){
$this->HTML .= '<div class="table-responsive"><table class="table table-striped table-bordered table-hover" id="projectname">';
In header-extras.php in the hooks folder, add this:
Code: Select all
<!-- Include DataTables -->
<style type="text/css">
.dataTables_wrapper .dataTables_length {
float: left;
}
.dataTables_wrapper .dataTables_info {
clear: none;
float: left;
padding-top: 0.15em;
padding-left: 10px;
}
</style>
<script type="text/javascript" charset="utf8" src="//cdn.datatables.net/1.10.7/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" class="init">
jQuery(document).ready(function() {
jQuery('#projectname').dataTable( {
"sDom": '<"top"li><"bottom"><"clear">',
"lengthMenu": [[10, 25, 50, -1], [10, 25, 50, "All"]]
} );
} );
</script>
That's it and you should have exactly as per the screenshot on all of your table views. You may need to play around with some CSS depending on the theme you are using.
NOTES:
1. The code above loads the Datatables jQuery plugin via cdn (see the src= url). You could also install the plugin locally and call it that way. See here:
http://datatables.net/manual/installation
2. I didn't load the plugin's own CSS because it overrode my existing theme's stylesheet. I applied a small snippet of styling to the header-extras.php to align the dropdown and info line. You might have to play around with that.
3. If you are not using Appgini 5.40 or 5.41, you could add the header-extras.php code directly to the header.php
4. You can change the dropdown "Show entries" values with this line of code: "lengthMenu": [[10, 25, 50, -1], [10, 25, 50, "All"]] - see here for more:
http://www.datatables.net/examples/adva ... _menu.html
5. By default, the plugin loads search, filtering and pagination functions. I removed them with the "sDom" code in the javascript as Appgini already includes those functions.
6. Of special note: You will likely need to change $x->RecordsPerPage = 10; in tablename_view.php as mentioned by Alan as otherwise the Appgini "Records 1 to XX of XXX" at the bottom left of the table can be confusing with corresponding "Showing 1 to 25 of 50 entries". As it is, this plugin will only show the entries on a per page basis as defined in your Appgini project so if $x->RecordsPerPage = 10; - "Show All" will only show 10 records, not actually ALL records. This is the only downside I can see at the moment and I'm trying to work out a way around it other than something like $x->RecordsPerPage = 20000;?
Once called, this plugin allows you to add heaps of functionality to your table. See here for examples:
http://www.datatables.net/examples/index
Hopefully that's useful to somebody. I like the plugin anyway
