How to add class or attribute to td element while using wenzhixin bootstrap table server side pagination

I am using wenzhixin bootstrap table with server side pagination. My table has two special column(First column for row Guid row id, Second column include two button for each cell)

My problem is, I should hide first column content because I don't want to see all Guid id by Users. Moreover, My table data coming with server side pagination. I couldn't button with html code for second column.

How can I add custom column for server side pagination or how can I add attribute to all cells in the first or second column?

Solution

To hide a column, you can use either JavaScript command after the bootstrapTable('load',..) if you used that, or in a document ready block:

$table.bootstrapTable('hideColumn', 'name')

shown on Bootstrap-Table site: bootstrap-table.com: showColumn-hideCoulumn

or if defining within the table, add data-visible="false" to the column you wish to hide. bootstrap-table.com: column-options visible i.e.

<table id="table"
  data-toggle="table"... >
<thead>
    <tr>
        <th data-field="id" data-visible="false" >ID</th>

For the buttons - I am not sure what type of project this is for - but I solved this by adding link buttons to the table rows via data-formatter - read up on this on the API documentation bootstrap-table.com/docs/api/column-options/#formatter

I used the examples found on github.com/wenzhixin/bootstrap-table/issues/1765 - under Format -> 'Basic Format' - which shows how to add a link (button via Bootstrap CSS). To make the link specific to a row, use row[] to get a field value, or you can even use the id column instead of hiding it, if that is your field (use 'value' instead of row[] then - see examples). I did mine something like:

<th data-formatter="buttonFormatter">View Links</th>

then in the javascript <script> block:

function buttonFormatter(value, row, index) {
    var id= row["id"];
    var url = "https:/...&id=" + id;
    return '<a href="'+ url + '" class="btn btn-primary">View</a>';
}

These are based roughly on stuff I've been doing recently - haven't tested these examples, but should give you a good start if you haven't already figured it out...