<div class="table-responsive">
                        <table class="table table-bordered responsive" id="dataTable" width="100%" cellspacing="0">
                            <thead>
                                <tr>
                                    <th>Name</th>
                                    <th>Location</th>
                                    <th>Email</th>
                                    <th>Phone no</th>
                                    <th>Start date</th>
                                </tr>
                            </thead>

                        </table>
                    </div>

// Call the dataTables jQuery plugin
      $(document).ready(function() {
        $("#dataTable").DataTable({
          ajax: "./data/newusers.json",
          columns: [
            { data: "name" },
            { data: "location" },
            { data: "email" },
            { data: "phone" },
            { data: "startdate" }
          ]
        });
      });

{
        "data": [
          {
            "name": "Tiger Nixon",
            "location": "Bangalore",
            "email": "tiger.nixon@yahoo.com",
            "phone": "7896546789",
            "startdate": "2018/04/25"
          },
          {
            "name": "Garrett Winters",
            "location": "Goa",
            "email": "garrett.wint34@gmail.com",
            "phone": "6398764532",
            "startdate": "2018/07/25"
          }
        ]
      }

// Call the dataTables jQuery plugin
    $(document).ready(function() {
    $("#dataTable").DataTable({
        ajax: "./data/newusers.json",
        columns: [
        { data: "name" },
        { data: "location" },
        { data: "email" },
        { data: "phone" },
        { data: "startdate" }
        ],
        responsive: {
        details: {
            display: $.fn.dataTable.Responsive.display.modal({
            header: function(row) {
                var data = row.data();
                return "Details for " + data[0];
            }
            }),
            renderer: $.fn.dataTable.Responsive.renderer.tableAll({
            tableClass: "table"
            })
        }
        }
    });
    });

<thead>
    <tr>
        <th>Name</th>
        <th>Location</th>
        <th>Email</th>
        <th>Phone no</th>
        <th>Start date</th>
        <th class="none"></th>
    </tr>
</thead>

responsive: {
            details: {
                type: 'column',
                target: 'tr',
                display: $.fn.dataTable.Responsive.display.modal({
                    header: function (row) {
                        var data = row.data();
                        return 'Details for ' + data.name;
                    }
                }),
                renderer: $.fn.dataTable.Responsive.renderer.tableAll({
                    tableClass: 'table'
                })
             }
      },...

<div id="myModal" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h3 id="modalTitle"></h3>
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
            </div>
            <div class="modal-body"></div>
            <div class="modal-footer">
                <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
            </div>
        </div>
    </div>
</div>

"columns": [
    ...
    { "data": "fieldname", "render": function(data, type, row) {return '<button class="btn btn-primary" data-toggle="modal" data-id="'+row.id+'" data-title="'+row.title+'" data-target="#myModal">'+data+'</button>'} },
    ...
],


$("#myModal").on('show.bs.modal', function (e) {
    var triggerLink = $(e.relatedTarget);
    var id = triggerLink.data("id");
    var title = triggerLink.data("title");

    $("#modalTitle").text(title);
    $(this).find(".modal-body").html("<h5>id: "+id+"</h5>");
});