Mann Mann - 5 months ago 36
jQuery Question

How to make href work in jquery-bootgrid basic plugin

Am using bootgrid-basic to show my data,

<table id="grid-basic"
class="table table-bordered table-striped table-condensed mb-none">
<thead>
<th data-column-id="aa">aa</th>
<th data-column-id="ss" data-order="desc">ss</th>
<th data-column-id="dd">dd</th>
<th data-column-id="ff">ff</th>
<th data-column-id="aaa">aaa</th>
<th data-column-id="aaaaa" >aaaAa</th>

</tr>
</thead>
<tbody>
@foreach($alldata as $data)
<tr>
<td>{{$data->aa}}</td>
<td><a href="#">{{$data->ss}}</a></td>
<td>0</td>
<td>{{$data->dd}}</td>
<td>{{$data->ff}}</td>
<td><a href="#">ASSSsdf</a></td>
</tr>
@endforeach
</tbody>
</table>


and initialized
$("#grid-basic").bootgrid();
in script.

Everything is working fine like search,data ordering ,pagination but those links doesnt see to work.

If i use formatter links work and remaining doesnt work.

$("#grid-basic").bootgrid(
formatters: {
"action": function (column, row)
{
return '<a href=\"/model/' + row.actions + '"\>' +row.actions+ '</a>' ;
}});


A jsfiddle link here : http://jsfiddle.net/6xpyxbcg/

SML SML
Answer

There is a parentheses missing in your JS, it should be bootgrid({ and you need to add data-formatter="link" to the th tag of the column you wish to use the formatter on (i.e. the link column).

HTML

 <th data-column-id="link" data-formatter="link" >Received</th>

JQuery

$(function()
{
  $("#grid-basic").bootgrid({

    formatters: {
        "link": function(column, row)
        {
            return "<a href=\"" + row.link + "\">" + row.link + "</a>";
        }
    }
  }
  )
});

Demo in jsFiddle

P.S. trying using the built in snippet next time, as there is a one click button that allows you to copy the code to the answer section and amend it accordingly.

Comments