Bootstrap tables
- Nathaniel Halbrooks
The FreePBX Framework for 13 includes a project called Bootstrap-Table
This component allows dynamically generated tables using JSON data.
Example Usage:
Build out your table as a standard bootstrap table. The "data-field" attribute should match the JSON response 'name'=>'value';
HTML
<?php
//Via action call
//$dataurl = "?display=mymodule&action=getJSON&jdata=grid&quietmode=1";
//Via BMO AJAX call
$dataurl = "ajax.php?module=mymodule&command=getJSON&jdata=grid";
?>
<div id="toolbar-all">
<button id="remove-all" class="btn btn-danger btn-remove" data-type="extensions" disabled data-section="all">
<i class="glyphicon glyphicon-remove"></i> <span><?php echo _('Delete')?></span>
</button>
</div>
<table id="mygrid"
data-url="<?php echo $dataurl?>"
data-cache="false"
data-cookie="true"
data-cookie-id-table="<must be a uniquely global name throughout all of freepbx>"
data-toolbar="#toolbar-all"
data-maintain-selected="true"
data-show-columns="true"
data-show-toggle="true"
data-toggle="table"
data-pagination="true"
data-search="true"
class="table table-striped">
<thead>
<tr>
<th data-field="name"><?php echo _("Items")?></th>
<th data-field="link" data-formatter="linkFormatter"><?php echo _("Actions")?></th>
</tr>
</thead>
</table> |
If you want to turn an already generated table into a bootstrap table just remove both "data-url" and "data-cache" from the table setup above. Bootstrap table will take care of the rest for you.
You may also pass a data-formatter variable to process the JSON data in to formatted HTML which then shows up in the field.
value: Value of data field
row: array representing row
index: Index of the current row
JavaScript
function linkFormatter(value, row, index){
var html = '<a href="?display=mymodule&view=form&id='+value+'"><i class="fa fa-pencil"></i></a>';
html += ' <a href="?display=mymodule&action=delete&id='+value+'" class="delAction"><i class="fa fa-trash"></i></a>';
return html;
} |
If you need to bind to classes or IDs within the table you need to first bind to the table loader. If you don't then your binds will never work. See below:
$("table").on("post-body.bs.table", function () {
$(".deleteitem").off("click");
$(".deleteitem").click(function(e) {
if(!confirm(_("Are you sure you want to delete this flow?"))) {
e.preventDefault();
e.stopPropagation();
}
});
}); |
In your doConfigPageInit for your module class you can add in a JSON action to dynamically return JSON data. This data can also be acquired through the native BMO ajax handlers which is probably more secure.
configPageInit PHP Expand source
BMO AJAX call
AJAX PHP