How to customize Toolbar without losing responsiveness?

hds6825

Hello,

Using this DataTable Example, I tried adding few more elements to the Toolbar but realized that the toolbar loses it's existing responsiveness (the Bootstrap's col-sm-3 classes
were lost).

How can I customize the Toolbar to have the required elements (see image attached) without losing it's responsiveness?

Thanks.

tangerine

You might be misunderstanding the term "toolbar". In the example you used,
the toolbar is some additional HTML you provide yourself. It does not include the length menu, search etc.
You need to show your code to get more useful help.

hds6825

@tangerine - Thanks for pointing that out. Here's what you require -

Here's my markup:

<div class="panel-body">
                <div>
                    <ul id="groups" class="nav nav-tabs">
                       <li data-pill th:each="grpName,iter : ${groups}" th:class="${iter.first} ? 'active' : ''">
                            <a href="#" th:text="${grpName}" th:data = "${grpName}" data-click="group"></a>
                        </li> 
                    </ul>
                </div>
                <br />
                <table id="example"
                    class="table table-striped table-bordered col-md-12">
                    <thead>
                        <tr>
                            <th>Suite</th>
                            <th>Action</th>
                            <th>Group</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr th:each="entrySet : ${tableValue}">
                            <td><a href="" th:href="@{suite} + '/' + ${entrySet.value.id}" th:text="${entrySet.value.fileName}"></a></td>
                            <td>
                                <button th:data="${entrySet.value.absolutePath}" th:id="${entrySet.value.id}" class="col-md-2 btn glyphicon glyphicon-play btn-success" data-toggle="tooltip" data-placement="top" onclick="onRun(event);" title="Run"></button>
                                <div hidden="hidden" th:classappend="${entrySet.value.id}"  class="col-md-10 result-set small">
                                    <span class="badge">Run: <span class="run">0</span></span>&nbsp;
                                    <span class="badge">Fail: <span class="fail">0</span></span>&nbsp;
                                    <span class="badge">Error: <span class="error">0</span></span>&nbsp;
                                    <span class="badge">Skip: <span class="skip">0</span></span>&nbsp;
                                </div>
                            </td>
                            <td th:text="${entrySet.value.groupName}"></td>
                        </tr>
                    </tbody>
                </table>
            </div>

jQuery ready:

$('#example').DataTable({
            "columnDefs" : [{"width" : "34%","targets" : 1}],
            drawCallback: function(settings) {
                var pagination = $(this).closest('.dataTables_wrapper').find('.dataTables_paginate');
                pagination.toggle(this.api().page.info().pages > 1);
            },
            "responsive": true
            //"dom": 'frtip<"toolbar">'
        });

Edited by Allan - Syntax highlighting. Details on how to highlight code using markdown can be found in this guide.

allan

Can you link to a page showing the issue please? I don't understand why any classes would be removed. Also your code doesn't actually appear to be injecting a toolbar above - it isn't making use of it. And even if it weren't commented out, I don't see anything that would be inserting information into it. As I say, a test case would really be needed.

Thanks,
Allan