File
Add library
Share
Login or Register
Help
HTMLSaved
 
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=EDGE" />
    <title>People Finder</title>
​
    <link href="https://maxcdn.bootstrapcdn.com/bootswatch/3.3.7/spacelab/bootstrap.min.css" rel="stylesheet" integrity="sha384-L/tgI3wSsbb3f/nW9V6Yqlaw3Gj7mpE56LWrhew/c8MIhAYWZ/FNirA64AVkB5pI" crossorigin="anonymous">
 <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/buttons/1.3.1/css/buttons.dataTables.min.css"/>
    <script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
​
    <link href="https://nightly.datatables.net/css/jquery.dataTables.css" rel="stylesheet" type="text/css" />
    <script src="https://nightly.datatables.net/js/jquery.dataTables.js"></script>
<script src="https://cdn.datatables.net/buttons/1.3.1/js/dataTables.buttons.min.js"></script> 
    <link href="https://cdn.datatables.net/select/1.2.1/css/select.dataTables.min.css" rel="stylesheet" type="text/css" />
    <script src="https://cdn.datatables.net/select/1.2.1/js/dataTables.select.min.js" type="text/javascript"></script>
​
    <link href="https://cdn.datatables.net/buttons/1.2.4/css/buttons.dataTables.min.css" rel="stylesheet" type="text/css" />
  
​
</head>
<body>
    <form>
​
        <div id="divBaseTestForm" data-bind="DoNotBindBelowThis: true">
            <fieldset id="fsBaseForm">
                <legend>User Info</legend>
                    <div id="divContentFindUser" class="jumbotron">
                        <table id="tblFindUser" class="table table-striped table-bordered dataTable no-footer"><thead></thead><tbody></tbody></table>
                    </div>
            </fieldset>
        </div>
​
    </form>
             <div class="modal fade" id="dialogUserDetails" data-backdrop="static" data-bind="DoNotBindBelowThis: true" role="dialog">
                <div id="dialogUserDetailsBinder"  data-backdrop="static"  class="modal-dialog">
                    <!-- Modal content-->
                    <div class="modal-content">
                        <div class="modal-header" style="display: none">
                            <button type="button" class="close" data-dismiss="modal">&times;</button>
                            <h4 class="modal-title">Modal Header</h4>
                        </div>
                        <div id="divModalBodyUserDetail" class="uifu modal-body">
                            <div  class="form-horizontal" style="background-color: #f5f5f5; max-width: 950px">
                                <fieldset class="uwfu">
                                    <legend>User Details</legend>
                                    <div class="form-group">
                                        <label class="col-lg-2 control-label" for="txtModalFirstName">First Name</label>
                                        <div class="col-lg-10">
                                            <input class="form-control" id="txtModalFirstName" type="text" readonly  placeholder="Email">
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="col-lg-2 control-label" for="txtModalLastName">Last Name</label>
                                        <div class="col-lg-10">
                                            <input class="form-control" id="txtModalLastName" type="text" readonly  placeholder="Username">
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="col-lg-2 control-label" for="txtModalPosition">Position</label>
                                        <div class="col-lg-10">
                                            <input class="form-control" id="txtModalPosition" type="text" readonly data-bind="textInput: position" placeholder="Command">
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="col-lg-2 control-label" for="txtModalOffice">Office</label>
                                        <div class="col-lg-10">
                                            <input class="form-control" id="txtModalOffice" type="text" readonly data-bind="textInput: office" placeholder="Org Code">
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="col-lg-2 control-label" for="txtModalStartDate">Start Date</label>
                                        <div class="col-lg-10">
                                            <input class="form-control" id="txtModalStartDate" type="text" readonly data-bind="textInput: date" placeholder="Affiliation">
                                        </div>
                                    </div>
                                     <div class="form-group">
                                        <label class="col-lg-2 control-label" for="txtModalSalary">Salary</label>
                                        <div class="col-lg-10">
                                            <input class="form-control" id="txtModalSalary" type="text" readonly data-bind="textInput: salary" placeholder="Affiliation">
                                        </div>
                                    </div>
                                </fieldset>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button id='btnCloseDialogUserDetails' type="button" class="btn btn-default">Close</button>
                        </div>
                    </div>
                </div>
            </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;
}
​
.filterddl { float:right;}
​
JavaScriptSaved
 
​
​
$(document).ready(function () {
     var table = $("#tblFindUser").DataTable(getTableDefinition());
  
      // attach a button handler
      table.on("click", ".buttonCell button", function(){
                 var tr = $(this).closest("tr");
                 var rowData = table.row(tr).data();
                 showDetailDialog(rowData);            
      });
  
      // Prevent row from being selected when user clicks on Show button
      table.on( 'user-select', function ( e, dt, type, cell, originalEvent ) {
          if ( $(cell.node()).hasClass("buttonCell") ) {
              e.preventDefault();
          }
      });
          
  
      // create and attach user detail modal dialog html.
     this.$detailDialog = $("#dialogUserDetails");
    $("#btnCloseDialogUserDetails").on("click", function () { 
        $("#dialogUserDetails").modal("hide"); 
    });
}); 
          
​
​
/**
 * Get table definition for the base FindUser table
 */
getTableDefinition = function () {
    // this function just builds the url needed based on paramters.
    var url = "examples/server_side/scripts/server_processing.php";
​
​
    var dataTableDeclaration = {
        dom: "iftBp",
        columns: [
        { title: "First Name", width: "150px" },
        { title: "Last Name", width: "150px" },
        { title:"Details", className:'buttonCell', defaultContent:"", selectable:false}
​
      ],
        columnDefs:[{targets:-1, render:function () {
          return "<button type='button' class='btn btn-default btn-xs'>Show</button>";
      
        }}],
        // Ajax as a function so I can bring up and empty table
        ajax: {
            url:url
 
        },
        select: { style:"single"},
        buttons: [{
            // display the details of a selected user 
            text: "Details", extend: "selectedSingle", action: function (e, dt, button, config) {
                var rowData = dt.row({ selected: true }).data();
                showDetailDialog(rowData);
            }
        } ]
    };
​
     return dataTableDeclaration;
​
};
​
// Copies the data into the modal dialog then shows it.
showDetailDialog = function (userData) {
​
    var $modal = $("#dialogUserDetails");
    $("#divModalBodyUserDetail");
    $("#txtModalFirstName").val(userData[0]);
    $("#txtModalLastName").val(userData[1]);
    $("#txtModalPosition").val(userData[2]);
    $("#txtModalOffice").val(userData[3]);
    $("#txtModalStartDate").val(userData[4]);
    $("#txtModalSalary").val(userData[5]);
    $modal.modal("show");
};
​
​
​
​
Output 300px

This bin was created anonymously and its free preview time has expired. Get a free unrestricted account

Dismiss x
public
Bin info
anonymouspro
0viewers