Quantcast
Channel: Recent Discussions — DataTables forums
Viewing all articles
Browse latest Browse all 82233

SDom custom toolbar, buttons not toggling

$
0
0
I have a custom toolbar showing in my dataTable that has a few bootstrap buttons. The buttons show and do what I want them to but they should toggle (so if one is clicked, the others are not) but for some reason mine all stayed showing as clicked. I'm not sure if I have to do something so they don't show as clicked if I click a different one or not. Here is some of my code:

build the toolbar....
tb = "";
tb += "<div class='btn-group btn-group-sm' style='margin-top:10px;' data-toggle='buttons-radio'>";
tb += "<button type='button' data-filter-value='' class='btn btn-primary filter-btn'>Show All</a>";
tb += "<button type='button' data-filter-value='On Track' class='btn btn-primary filter-btn'>On Track</a>";
tb += "<button type='button' data-filter-value='With Issues' class='btn btn-primary filter-btn'>With Issues</a>";
tb += "<button type='button' data-filter-value='Critical' class='btn btn-primary filter-btn'>Critical</a>";
tb += "<button type='button' data-filter-value='No Status' class='btn btn-primary filter-btn'>No Status</a>";
tb += "</div>";

part of the DataTable - most I didn't think was relevant
oTable = $('#example').dataTable( {
"bAutoWidth":false,
"bProcessing": false,
"bDestroy": true,
"aaData": data,
"sDom": '<"toolbar">frtip',
"aoColumns": [

makes the toolbar show using the above built html.....
$("div.toolbar").html(tb);
$(".filter-btn").click(function(){
$("#example").dataTable().fnFilter($(this).data("filterValue"),5);
});

I used what I could find in your documentation to form this. Like I said, it does function but the buttons don't toggle. Any ideas?

Viewing all articles
Browse latest Browse all 82233

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>