daily pastebin goal
23%
SHARE
TWEET

Untitled

a guest Aug 20th, 2018 104 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <div class="table-responsive">
  2.                         <table class="table table-bordered responsive" id="dataTable" width="100%" cellspacing="0">
  3.                             <thead>
  4.                                 <tr>
  5.                                     <th>Name</th>
  6.                                     <th>Location</th>
  7.                                     <th>Email</th>
  8.                                     <th>Phone no</th>
  9.                                     <th>Start date</th>
  10.                                 </tr>
  11.                             </thead>
  12.  
  13.                         </table>
  14.                     </div>
  15.    
  16. // Call the dataTables jQuery plugin
  17.       $(document).ready(function() {
  18.         $("#dataTable").DataTable({
  19.           ajax: "./data/newusers.json",
  20.           columns: [
  21.             { data: "name" },
  22.             { data: "location" },
  23.             { data: "email" },
  24.             { data: "phone" },
  25.             { data: "startdate" }
  26.           ]
  27.         });
  28.       });
  29.    
  30. {
  31.         "data": [
  32.           {
  33.             "name": "Tiger Nixon",
  34.             "location": "Bangalore",
  35.             "email": "tiger.nixon@yahoo.com",
  36.             "phone": "7896546789",
  37.             "startdate": "2018/04/25"
  38.           },
  39.           {
  40.             "name": "Garrett Winters",
  41.             "location": "Goa",
  42.             "email": "garrett.wint34@gmail.com",
  43.             "phone": "6398764532",
  44.             "startdate": "2018/07/25"
  45.           }
  46.         ]
  47.       }
  48.    
  49. // Call the dataTables jQuery plugin
  50.     $(document).ready(function() {
  51.     $("#dataTable").DataTable({
  52.         ajax: "./data/newusers.json",
  53.         columns: [
  54.         { data: "name" },
  55.         { data: "location" },
  56.         { data: "email" },
  57.         { data: "phone" },
  58.         { data: "startdate" }
  59.         ],
  60.         responsive: {
  61.         details: {
  62.             display: $.fn.dataTable.Responsive.display.modal({
  63.             header: function(row) {
  64.                 var data = row.data();
  65.                 return "Details for " + data[0];
  66.             }
  67.             }),
  68.             renderer: $.fn.dataTable.Responsive.renderer.tableAll({
  69.             tableClass: "table"
  70.             })
  71.         }
  72.         }
  73.     });
  74.     });
  75.    
  76. <thead>
  77.     <tr>
  78.         <th>Name</th>
  79.         <th>Location</th>
  80.         <th>Email</th>
  81.         <th>Phone no</th>
  82.         <th>Start date</th>
  83.         <th class="none"></th>
  84.     </tr>
  85. </thead>
  86.    
  87. responsive: {
  88.             details: {
  89.                 type: 'column',
  90.                 target: 'tr',
  91.                 display: $.fn.dataTable.Responsive.display.modal({
  92.                     header: function (row) {
  93.                         var data = row.data();
  94.                         return 'Details for ' + data.name;
  95.                     }
  96.                 }),
  97.                 renderer: $.fn.dataTable.Responsive.renderer.tableAll({
  98.                     tableClass: 'table'
  99.                 })
  100.              }
  101.       },...
  102.    
  103. <div id="myModal" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true">
  104.     <div class="modal-dialog">
  105.         <div class="modal-content">
  106.             <div class="modal-header">
  107.                 <h3 id="modalTitle"></h3>
  108.                 <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
  109.             </div>
  110.             <div class="modal-body"></div>
  111.             <div class="modal-footer">
  112.                 <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
  113.             </div>
  114.         </div>
  115.     </div>
  116. </div>
  117.    
  118. "columns": [
  119.     ...
  120.     { "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>'} },
  121.     ...
  122. ],
  123.  
  124.  
  125. $("#myModal").on('show.bs.modal', function (e) {
  126.     var triggerLink = $(e.relatedTarget);
  127.     var id = triggerLink.data("id");
  128.     var title = triggerLink.data("title");
  129.  
  130.     $("#modalTitle").text(title);
  131.     $(this).find(".modal-body").html("<h5>id: "+id+"</h5>");
  132. });
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
 
Top