Adding my own buttons to a Bootgrid table using PHP

I am using JQuery Bootgrid for my table display, pagination, search, etc. What I do not like about it are the command buttons, I just want to add simple html buttons to my tables such as:

echo "<td><a href='expensereport.php?source=editexpenses&p_id=$expenseID'><button class='btn btn-primary btn-icon' type='button'><span class='zmdi zmdi-edit'></span></button></a>";

This approach works great until I use

<table id="data-table">

which tuirns on bootgrid. Bootgrid will not display the button, at all in my table. Does anyone know how to turn off the bootgrid command buttons so I can add my own? My buttons work great until I add bootgrid, which is refusing to display them in my tables. Thank you for your help I am new to Bootgrid.

Solution

Have a look into using Formatters.

Create a column were each cell contains your $expenseID.

Make sure that data-column-id is set on the expense id column head. For this example we will set it to data-column-id="expenseId". You can hide this column entirely from view by adding data-visible-in-selection='false' and data-visible='false' to the column head too.

In the column head for your "actions" you will also need to specify the formatter you would like to use by passing data-formatter. In this case I have named the formatter function expenseReportEdit so we will use data-formatter="expenseReportEdit".

Your HTML markup for the table head will be something like this..

<thead>
    <tr>
        <th data-column-id="expenseId" data-identifier='true' data-visible-in-selection='false' data-visible='false'>Expense ID</th>
        <th data-column-id="expenseActions" data-formatter="expenseReportEdit">Actions</th>
    </tr>
</thead>

Then create your formatter function like so..

$("#yourTableId").bootgrid({
    formatters: {                    
        expenseReportEdit: function (column, row) {
            return "<a href=\"expensereport.php?source=editexpenses&p_id=" + row.expenseId + "\"><button class='btn btn-primary btn-icon' type='button'><span class='zmdi zmdi-edit'></span></button></a>";
        }
    }
});