CODEWITHSUNDEEP
javascriptjquerytwitter-bootstrapdatatables
JGV
JGV

Reputation: 5187

DataTables - modal display - icons not displaying

I am trying to develop the following functionality, https://datatables.net/extensions/responsive/examples/display-types/modal.html

I followed the exact same steps but, I am not getting the icons to launch the modal dialog,

Here is the complete code,

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>Responsive</title>

    <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.15/css/dataTables.bootstrap.min.css" />
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/responsive/2.1.1/css/responsive.bootstrap.min.css" />


    <script src="https://code.jquery.com/jquery-3.1.1.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="https://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js"></script>
    <script src="https://cdn.datatables.net/1.10.15/js/dataTables.bootstrap.min.js"></script>
    <script src="https://cdn.datatables.net/responsive/2.1.1/js/dataTables.responsive.min.js"></script>
    <script src="https://cdn.datatables.net/responsive/2.1.1/js/responsive.bootstrap.min.js"></script>
    <script>
        $(document).ready(function () {
            var dataset = {

                "data": [
                  {
                      "first_name": "Airi",
                      "last_name": "Satou",
                      "position": "Accountant",
                      "office": "Tokyo",
                      "start_date": "28th Nov 08",
                      "salary": "$162,700"
                  },
                  {
                      "first_name": "Angelica",
                      "last_name": "Ramos",
                      "position": "Chief Executive Officer (CEO)",
                      "office": "London",
                      "start_date": "9th Oct 09",
                      "salary": "$1,200,000"
                  },
                  {
                      "first_name": "Ashton",
                      "last_name": "Cox",
                      "position": "Junior Technical Author",
                      "office": "San Francisco",
                      "start_date": "12th Jan 09",
                      "salary": "$86,000"
                  },
                  {
                      "first_name": "Bradley",
                      "last_name": "Greer",
                      "position": "Software Engineer",
                      "office": "London",
                      "start_date": "13th Oct 12",
                      "salary": "$132,000"
                  },
                  {
                      "first_name": "Brenden",
                      "last_name": "Wagner",
                      "position": "Software Engineer",
                      "office": "San Francisco",
                      "start_date": "7th Jun 11",
                      "salary": "$206,850"
                  },
                  {
                      "first_name": "Brielle",
                      "last_name": "Williamson",
                      "position": "Integration Specialist",
                      "office": "New York",
                      "start_date": "2nd Dec 12",
                      "salary": "$372,000"
                  },
                  {
                      "first_name": "Bruno",
                      "last_name": "Nash",
                      "position": "Software Engineer",
                      "office": "London",
                      "start_date": "3rd May 11",
                      "salary": "$163,500"
                  },
                  {
                      "first_name": "Caesar",
                      "last_name": "Vance",
                      "position": "Pre-Sales Support",
                      "office": "New York",
                      "start_date": "12th Dec 11",
                      "salary": "$106,450"
                  },
                  {
                      "first_name": "Cara",
                      "last_name": "Stevens",
                      "position": "Sales Assistant",
                      "office": "New York",
                      "start_date": "6th Dec 11",
                      "salary": "$145,600"
                  },
                  {
                      "first_name": "Cedric",
                      "last_name": "Kelly",
                      "position": "Senior Javascript Developer",
                      "office": "Edinburgh",
                      "start_date": "29th Mar 12",
                      "salary": "$433,060"
                  }
                ]
            }

            $.each(dataset.data, function (i, item) {
                item.age = Math.floor((Math.random() * 70) + 1);
                item.extn = Math.floor((Math.random() * 1000) + 1);
            })


            $('#example').DataTable({
                "paging": false,
                "info": false,
                "filter": false,
                "paging": false,
                retrieve: true,
                "processing": true,
                data: dataset.data,
                columns: [{ "data": "first_name" },
                         { "data": "last_name" },
                         { "data": "position" },
                         { "data": "office" },
                         { "data": "age" },
                         { "data": "start_date" },
                         { "data": "salary" },
                         { "data": "extn" }],
                responsive: {
                    details: {
                        display: $.fn.dataTable.Responsive.display.modal({
                            header: function (row) {
                                var data = row.data();
                                alert(row.data.length)
                                return 'Details for ' + data[0] + ' ' + data[1];
                            }
                        }),
                        renderer: $.fn.dataTable.Responsive.renderer.tableAll({
                            tableClass: 'table'
                        })
                    }
                }
            });
        });
    </script>
</head>
<body>
    <table width="100%" class="table table-striped table-bordered nowrap" id="example" cellspacing="0">
        <thead>
            <tr>
                <th>First name</th>
                <th>Last name</th>
                <th>Position</th>
                <th>Office</th>
                <th>Age</th>
                <th>Start date</th>
                <th>Salary</th>
                <th>Extn.</th>

            </tr>
        </thead>
        <tbody></tbody>
    </table>
</body>
</html>

Output:

enter image description here

You can even copy and paste the entire code in an HTML file and run it to see the behavior.

I am not seeing any errors in the console. I tested with IE 11 and Chrome.

Any suggestions / directions are greatly appreciated.

Edit:

Snapshot from jsbin.com/hehewiz/edit?html,output. (link created by bazzells)

enter image description here

Upvotes: 0

Views: 1651

Answers (2)

bazzells
bazzells

Reputation: 329

The icons are hidden on a wide screen due to the collapsed class being removed from the table. The collapsed class is toggling based on the window width currently.

Upvotes: 1

Rafik Tighilt
Rafik Tighilt

Reputation: 2101

Your code is working just fine, when the screen gets smaller and at least one columns becomes hidden, the (+) icon appears.

This is because this option is for responsive display of information.

Upvotes: 1

Related Questions