DataTables

DataTables Examples

by Hüseyin BABAL

HTML

<script src="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.0/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.0/css/jquery.dataTables.css">
<script src="http://jschr.github.io/bootstrap-modal/js/bootstrap-modal.js"></script>
<script src="http://getbootstrap.com/2.3.2/assets/js/bootstrap.js"></script>
<link rel="stylesheet" href="http://getbootstrap.com/2.3.2/assets/css/bootstrap.css">
<script src="http://jschr.github.io/bootstrap-modal/js/bootstrap-modalmanager.js"></script>
            
<table cellpadding="0" cellspacing="0" border="0" class="dataTable" id="example">
    <thead>
        <tr>
            <th>Title1</th>
            <th>Title2</th>
            <th>Title3</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Abella Sàrl</td>
  <td>10 Rue du Village L-6585 Steinheim (Steenem)</td>
  <td>
    <a class="mymodal" data-toggle="modal">a1
      <i class="fa fa-edit editMarker" data-marker='{"address":"26 Rue du Village  L-6585 Steinheim (Steenem)","longitude":null,"latitude":null,"name":"Abella Sàrl","_user":"5305051a6f2529844824c1c5","_id":"53077ef91f85d2c752f1cb50","uptade_date":"2014-02-21T16:29:45.175Z","create_date":"2014-02-21T16:29:45.175Z","active":true,"spritesheet_y":null,"spritesheet_x":null,"logo":"default","__v":0}'></i>
    </a>
  </td>
        </tr>
        <tr>
 <td>Action Line SA</td>
  <td>28 Route de Longwy L-8080 Bertrange (Bartreng)</td>
  <td>
    <a class="mymodal" data-toggle="modal">a2
      <i class="fa fa-edit editMarker" data-marker='{"address":"27 Route de Longwy L-8080 Bertrange (Bartreng)","longitude":null,"latitude":null,"name":"Action Line SA","_user":"5305051a6f2529844824c1c5","_id":"53077ef81f85d2c752f1ca18","uptade_date":"2014-02-21T16:29:44.720Z","create_date":"2014-02-21T16:29:44.720Z","active":true,"spritesheet_y":null,"spritesheet_x":null,"logo":"default","__v":0}'></i>
    </a>
  </td>
        </tr>
        <tr>
...

JavaScript

$(document).ready(function() {
    $('#example').dataTable({"sPaginationType": "full_numbers", "iDisplayLength":2});
    initModal();
    
    $(".dataTables_paginate").find("a").on("click", function() {
            initModal();
    })
    
    function initModal() {
        $('.mymodal').on("click", function() {
        $('.modal').modal('hide');
        $("#modal-content").html(JSON.stringify($(this).find(".editMarker").data("marker")));
            $('.modal').modal();
    });
    }
});