File
Add library
Share
Login or Register
Help
HTMLSaved
 
<html>
​
<head>
<meta name="description" content="Toggle-Switch no working on responsive" />
​
​
    <meta charset="utf-8">
​
    <title>DataTables - JS Bin</title>
​
    <script src="https://code.jquery.com/jquery-3.7.0.js"></script>
​
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.13.5/css/jquery.dataTables.css">
    <script src="https://cdn.datatables.net/1.13.5/js/jquery.dataTables.js"></script>
​
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/bs-3.3.7/dt-1.10.16/datatables.min.css">
​
​
    <link href="https://cdn.datatables.net/1.13.10/css/dataTables.bootstrap4.css" rel="stylesheet">
    <link href="https://cdn.datatables.net/responsive/2.5.0/css/responsive.bootstrap4.css" rel="stylesheet">
​
​
    <script src="https://cdn.datatables.net/1.13.10/js/jquery.dataTables.js"></script>
    <script src="https://cdn.datatables.net/1.13.10/js/dataTables.bootstrap4.js"></script>
​
    <script src="https://cdn.datatables.net/responsive/2.5.0/js/dataTables.responsive.js"></script>
    <script src="https://cdn.datatables.net/responsive/2.5.0/js/responsive.bootstrap4.js"></script>
​
    <link href="https://gitcdn.github.io/bootstrap-toggle/2.2.2/css/bootstrap-toggle.min.css" rel="stylesheet">
    <script src="https://gitcdn.github.io/bootstrap-toggle/2.2.2/js/bootstrap-toggle.min.js"></script>
​
​
    <style id="jsbin-css">
        body {
            font: 90%/1.45em "Helvetica Neue", HelveticaNeue, Verdana, Arial, Helvetica, sans-serif;
            margin: 0;
            padding: 0;
            color: #333;
            background-color: #fff;
        }
    </style>
​
<body>
    <div class="container">
        <table id="example" class="table table-striped table-bordered table-responsive" width="100%">
            <thead>
                <tr>
                    <th>Select</th>
                    <th>Name</th>
                    <th>Position</th>
                    <th>Office</th>
                    <th>Age</th>
                    <th>Start date</th>
                    <th>Salary</th>
                    <th>chk</th>
                </tr>
            </thead>
​
            <tfoot>
                <tr>
                    <th>Select</th>
                    <th>Name</th>
                    <th>Position</th>
                    <th>Office</th>
                    <th>Age</th>
                    <th>Start date</th>
                    <th>Salary</th>
                    <th>chk</th>
                </tr>
            </tfoot>
​
            <tbody>
                <tr>
                    <th>1</th>
                    <td>Tiger Nixon</td>
                    <td>System Architect</td>
                    <td>Edinburgh</td>
                    <td>61</td>
                    <td>2011/04/25</td>
                    <td>$3,120</td>
                    <th>1</th>
                </tr>
                <tr>
                    <th>0</th>
                    <td>Garrett Winters</td>
                    <td>Director</td>
                    <td>Edinburgh</td>
                    <td>63</td>
                    <td>2011/07/25</td>
                    <td>$5,300</td>
                    <th>0</th>
                </tr>
                <tr>
                    <th>1</th>
                    <td>Ashton Cox</td>
                    <td>Technical Author</td>
                    <td>San Francisco</td>
                    <td>66</td>
                    <td>2009/01/12</td>
                    <td>$4,800</td>
                    <th>1</th>
                </tr>
                <tr>
                    <th>0</th>
                    <td>Cedric Kelly</td>
                    <td>Javascript Developer</td>
                    <td>Edinburgh</td>
                    <td>22</td>
                    <td>2012/03/29</td>
                    <td>$3,600</td>
                    <th>1</th>
                </tr>
                <tr>
                    <th>1</th>
                    <td>Jenna Elliott</td>
                    <td>Financial Controller</td>
                    <td>Edinburgh</td>
                    <td>33</td>
                    <td>2008/11/28</td>
                    <td>$5,300</td>
                    <th>0</th>
                </tr>
​
            </tbody>
        </table>
    </div>
​
​
​
</body>
​
</html>
CSSSaved
 
body {
  font: 90%/1.45em "Helvetica Neue", HelveticaNeue, Verdana, Arial, Helvetica, sans-serif;
  margin: 0;
  padding: 0;
  color: #333;
  background-color: #fff;
}
​
JavaScriptSaved
 
  $(document).ready(function () {
            var table = $('#example').DataTable({
                pageLength: 10,
                responsive: true,
                columnDefs: [{
                    targets: [0],
                    data: "active",
                    className: "dt-body-center",
                    render: function (data, type, row) {return RenderToggle(data, type, row, state=1)}    
                },
                {
                    targets: [7],
                    data: "specific",
                    className: "dt-body-center",
                    render: function (data, type, row) {return RenderToggle(data, type, row, state=0)}    
                },
            ],
                order: [[1, 'asc']],
​
                rowCallback: function (row, data) {
                    $('input.toggle-switch', row).prop('checked', data.active == 1).bootstrapToggle({ size: 'mini' });
                }
​
            });
​
            function RenderToggle(data, type, row, state) {
                let chk = state == 1 ? "checkbox" : "checkbox-inactive";
                if (type === 'display') {
                    return '<input type= "'+ chk +'" class="toggle-switch" data-on="Yes" data-off="No" data-onstyle="success" data-offstyle="danger" data-style="mr-1" data-size="xs">';
                }
                    return data;
            }
​
​
        });
2 errors 1 warning
Line 9: Missing semicolon.
Line 15: Missing semicolon.
Line 27: 'let' is available in ES6 (use esnext option) or Mozilla JS extensions (use moz).
Output 300px

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers