javascript - fechas - filtrar por fecha datatables
jQuery DataTables estilo de rango de fechas (3)
Tengo una sugerencia de que puedes echar un vistazo;
$(document).ready(function() {
var total = $("#example tfoot th").length;
$("#example tfoot th").each(function (index) {
if (index !== total - 1) {
var title = $(this).text().trim();
$(this).html(''<input type="text" class="form-control" placeholder="Search '' + title +''"/>'');
}
});
var table = $("#example").DataTable({
"bFilter": false // hide searchbox
});
table.columns().every(function () {
var that = this;
$(''input'', this.footer()).on(''keyup change'',
function () {
if (that.search() !== this.value) {
that
.search(this.value)
.draw();
}
});
});
} );
tfoot input {
width: 100%;
padding: 3px;
box-sizing: border-box;
}
.table-container{
position: relative;
margin: 20px;
}
.filters {
position: absolute;
top: 0;
right: 0;
}
.datetimepicker{
width: 180px;
float: left;
margin-left: 10px;
}
.table-container .filters .form-control {
height: 30px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js"></script>
<link href="https://cdn.datatables.net/1.10.15/css/jquery.dataTables.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="table-container">
<div class="filters">
<div class="input-group date datetimepicker">
<input id="Min-Date" type="text" class="form-control" placeholder="Start Date" />
<span class="input-group-addon">
<span class="fa fa-calendar"></span>
</span>
</div>
<div class="input-group date datetimepicker">
<input id="Max-Date" type="text" class="form-control" placeholder="End Date" />
<span class="input-group-addon">
<span class="fa fa-calendar"></span>
</span>
</div>
</div>
<table id="example" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</tfoot>
<tbody>
<tr>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</td>
<td>2011/04/25</td>
<td>$320,800</td>
</tr>
<tr>
<td>Garrett Winters</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>63</td>
<td>2011/07/25</td>
<td>$170,750</td>
</tr>
<tr>
<td>Ashton Cox</td>
<td>Junior Technical Author</td>
<td>San Francisco</td>
<td>66</td>
<td>2009/01/12</td>
<td>$86,000</td>
</tr>
<tr>
<td>Cedric Kelly</td>
<td>Senior Javascript Developer</td>
<td>Edinburgh</td>
<td>22</td>
<td>2012/03/29</td>
<td>$433,060</td>
</tr>
<tr>
<td>Airi Satou</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>33</td>
<td>2008/11/28</td>
<td>$162,700</td>
</tr>
<tr>
<td>Brielle Williamson</td>
<td>Integration Specialist</td>
<td>New York</td>
<td>61</td>
<td>2012/12/02</td>
<td>$372,000</td>
</tr>
<tr>
<td>Herrod Chandler</td>
<td>Sales Assistant</td>
<td>San Francisco</td>
<td>59</td>
<td>2012/08/06</td>
<td>$137,500</td>
</tr>
<tr>
<td>Rhona Davidson</td>
<td>Integration Specialist</td>
<td>Tokyo</td>
<td>55</td>
<td>2010/10/14</td>
<td>$327,900</td>
</tr>
<tr>
<td>Colleen Hurst</td>
<td>Javascript Developer</td>
<td>San Francisco</td>
<td>39</td>
<td>2009/09/15</td>
<td>$205,500</td>
</tr>
<tr>
<td>Sonya Frost</td>
<td>Software Engineer</td>
<td>Edinburgh</td>
<td>23</td>
<td>2008/12/13</td>
<td>$103,600</td>
</tr>
<tr>
<td>Jena Gaines</td>
<td>Office Manager</td>
<td>London</td>
<td>30</td>
<td>2008/12/19</td>
<td>$90,560</td>
</tr>
<tr>
<td>Quinn Flynn</td>
<td>Support Lead</td>
<td>Edinburgh</td>
<td>22</td>
<td>2013/03/03</td>
<td>$342,000</td>
</tr>
<tr>
<td>Charde Marshall</td>
<td>Regional Director</td>
<td>San Francisco</td>
<td>36</td>
<td>2008/10/16</td>
<td>$470,600</td>
</tr>
<tr>
<td>Haley Kennedy</td>
<td>Senior Marketing Designer</td>
<td>London</td>
<td>43</td>
<td>2012/12/18</td>
<td>$313,500</td>
</tr>
<tr>
<td>Tatyana Fitzpatrick</td>
<td>Regional Director</td>
<td>London</td>
<td>19</td>
<td>2010/03/17</td>
<td>$385,750</td>
</tr>
<tr>
<td>Michael Silva</td>
<td>Marketing Designer</td>
<td>London</td>
<td>66</td>
<td>2012/11/27</td>
<td>$198,500</td>
</tr>
<tr>
<td>Paul Byrd</td>
<td>Chief Financial Officer (CFO)</td>
<td>New York</td>
<td>64</td>
<td>2010/06/09</td>
<td>$725,000</td>
</tr>
<tr>
<td>Gloria Little</td>
<td>Systems Administrator</td>
<td>New York</td>
<td>59</td>
<td>2009/04/10</td>
<td>$237,500</td>
</tr>
<tr>
<td>Bradley Greer</td>
<td>Software Engineer</td>
<td>London</td>
<td>41</td>
<td>2012/10/13</td>
<td>$132,000</td>
</tr>
<tr>
<td>Dai Rios</td>
<td>Personnel Lead</td>
<td>Edinburgh</td>
<td>35</td>
<td>2012/09/26</td>
<td>$217,500</td>
</tr>
<tr>
<td>Jenette Caldwell</td>
<td>Development Lead</td>
<td>New York</td>
<td>30</td>
<td>2011/09/03</td>
<td>$345,000</td>
</tr>
<tr>
<td>Yuri Berry</td>
<td>Chief Marketing Officer (CMO)</td>
<td>New York</td>
<td>40</td>
<td>2009/06/25</td>
<td>$675,000</td>
</tr>
<tr>
<td>Caesar Vance</td>
<td>Pre-Sales Support</td>
<td>New York</td>
<td>21</td>
<td>2011/12/12</td>
<td>$106,450</td>
</tr>
<tr>
<td>Doris Wilder</td>
<td>Sales Assistant</td>
<td>Sidney</td>
<td>23</td>
<td>2010/09/20</td>
<td>$85,600</td>
</tr>
<tr>
<td>Angelica Ramos</td>
<td>Chief Executive Officer (CEO)</td>
<td>London</td>
<td>47</td>
<td>2009/10/09</td>
<td>$1,200,000</td>
</tr>
<tr>
<td>Gavin Joyce</td>
<td>Developer</td>
<td>Edinburgh</td>
<td>42</td>
<td>2010/12/22</td>
<td>$92,575</td>
</tr>
<tr>
<td>Jennifer Chang</td>
<td>Regional Director</td>
<td>Singapore</td>
<td>28</td>
<td>2010/11/14</td>
<td>$357,650</td>
</tr>
<tr>
<td>Brenden Wagner</td>
<td>Software Engineer</td>
<td>San Francisco</td>
<td>28</td>
<td>2011/06/07</td>
<td>$206,850</td>
</tr>
<tr>
<td>Fiona Green</td>
<td>Chief Operating Officer (COO)</td>
<td>San Francisco</td>
<td>48</td>
<td>2010/03/11</td>
<td>$850,000</td>
</tr>
<tr>
<td>Shou Itou</td>
<td>Regional Marketing</td>
<td>Tokyo</td>
<td>20</td>
<td>2011/08/14</td>
<td>$163,000</td>
</tr>
<tr>
<td>Michelle House</td>
<td>Integration Specialist</td>
<td>Sidney</td>
<td>37</td>
<td>2011/06/02</td>
<td>$95,400</td>
</tr>
<tr>
<td>Suki Burks</td>
<td>Developer</td>
<td>London</td>
<td>53</td>
<td>2009/10/22</td>
<td>$114,500</td>
</tr>
<tr>
<td>Prescott Bartlett</td>
<td>Technical Author</td>
<td>London</td>
<td>27</td>
<td>2011/05/07</td>
<td>$145,000</td>
</tr>
<tr>
<td>Gavin Cortez</td>
<td>Team Leader</td>
<td>San Francisco</td>
<td>22</td>
<td>2008/10/26</td>
<td>$235,500</td>
</tr>
<tr>
<td>Martena Mccray</td>
<td>Post-Sales support</td>
<td>Edinburgh</td>
<td>46</td>
<td>2011/03/09</td>
<td>$324,050</td>
</tr>
<tr>
<td>Unity Butler</td>
<td>Marketing Designer</td>
<td>San Francisco</td>
<td>47</td>
<td>2009/12/09</td>
<td>$85,675</td>
</tr>
<tr>
<td>Howard Hatfield</td>
<td>Office Manager</td>
<td>San Francisco</td>
<td>51</td>
<td>2008/12/16</td>
<td>$164,500</td>
</tr>
<tr>
<td>Hope Fuentes</td>
<td>Secretary</td>
<td>San Francisco</td>
<td>41</td>
<td>2010/02/12</td>
<td>$109,850</td>
</tr>
<tr>
<td>Vivian Harrell</td>
<td>Financial Controller</td>
<td>San Francisco</td>
<td>62</td>
<td>2009/02/14</td>
<td>$452,500</td>
</tr>
<tr>
<td>Timothy Mooney</td>
<td>Office Manager</td>
<td>London</td>
<td>37</td>
<td>2008/12/11</td>
<td>$136,200</td>
</tr>
<tr>
<td>Jackson Bradshaw</td>
<td>Director</td>
<td>New York</td>
<td>65</td>
<td>2008/09/26</td>
<td>$645,750</td>
</tr>
<tr>
<td>Olivia Liang</td>
<td>Support Engineer</td>
<td>Singapore</td>
<td>64</td>
<td>2011/02/03</td>
<td>$234,500</td>
</tr>
<tr>
<td>Bruno Nash</td>
<td>Software Engineer</td>
<td>London</td>
<td>38</td>
<td>2011/05/03</td>
<td>$163,500</td>
</tr>
<tr>
<td>Sakura Yamamoto</td>
<td>Support Engineer</td>
<td>Tokyo</td>
<td>37</td>
<td>2009/08/19</td>
<td>$139,575</td>
</tr>
<tr>
<td>Thor Walton</td>
<td>Developer</td>
<td>New York</td>
<td>61</td>
<td>2013/08/11</td>
<td>$98,540</td>
</tr>
<tr>
<td>Finn Camacho</td>
<td>Support Engineer</td>
<td>San Francisco</td>
<td>47</td>
<td>2009/07/07</td>
<td>$87,500</td>
</tr>
<tr>
<td>Serge Baldwin</td>
<td>Data Coordinator</td>
<td>Singapore</td>
<td>64</td>
<td>2012/04/09</td>
<td>$138,575</td>
</tr>
<tr>
<td>Zenaida Frank</td>
<td>Software Engineer</td>
<td>New York</td>
<td>63</td>
<td>2010/01/04</td>
<td>$125,250</td>
</tr>
<tr>
<td>Zorita Serrano</td>
<td>Software Engineer</td>
<td>San Francisco</td>
<td>56</td>
<td>2012/06/01</td>
<td>$115,000</td>
</tr>
<tr>
<td>Jennifer Acosta</td>
<td>Junior Javascript Developer</td>
<td>Edinburgh</td>
<td>43</td>
<td>2013/02/01</td>
<td>$75,650</td>
</tr>
<tr>
<td>Cara Stevens</td>
<td>Sales Assistant</td>
<td>New York</td>
<td>46</td>
<td>2011/12/06</td>
<td>$145,600</td>
</tr>
<tr>
<td>Hermione Butler</td>
<td>Regional Director</td>
<td>London</td>
<td>47</td>
<td>2011/03/21</td>
<td>$356,250</td>
</tr>
<tr>
<td>Lael Greer</td>
<td>Systems Administrator</td>
<td>London</td>
<td>21</td>
<td>2009/02/27</td>
<td>$103,500</td>
</tr>
<tr>
<td>Jonas Alexander</td>
<td>Developer</td>
<td>San Francisco</td>
<td>30</td>
<td>2010/07/14</td>
<td>$86,500</td>
</tr>
<tr>
<td>Shad Decker</td>
<td>Regional Director</td>
<td>Edinburgh</td>
<td>51</td>
<td>2008/11/13</td>
<td>$183,000</td>
</tr>
<tr>
<td>Michael Bruce</td>
<td>Javascript Developer</td>
<td>Singapore</td>
<td>29</td>
<td>2011/06/27</td>
<td>$183,000</td>
</tr>
<tr>
<td>Donna Snider</td>
<td>Customer Support</td>
<td>New York</td>
<td>27</td>
<td>2011/01/25</td>
<td>$112,000</td>
</tr>
</tbody>
</table>
</div>
También puedes consultar JsFiddle: https://jsfiddle.net/L9ma7xn5/ No sugiero que uses bootstrap cols aquí solo ponlo con el posicionamiento de tus objetos correctamente con positivo absoluto y relativo.
Si hay alguna otra pregunta, consulte libremente.
Tengo una vista parcial así:
<div style="float: right;">
<div class="col-sm-12 col-md-3">
<div class="input-group date datetimepicker">
<input id="Min-Date" type="text" class="form-control" placeholder="Start Date" />
<span class="input-group-addon">
<span class="fa fa-calendar"></span>
</span>
</div>
</div>
<span class="col-md-1 fa fa-minus text-center" style="margin-top: 1%;"></span>
<div class="col-sm-12 col-md-3">
<div class="input-group date datetimepicker">
<input id="Max-Date" type="text" class="form-control" placeholder="End Date" />
<span class="input-group-addon">
<span class="fa fa-calendar"></span>
</span>
</div>
</div>
</div>
<table id="Test-Table" class="table table-striped">
<thead>
<tr>
<th>
@Html.DisplayNameFor(model => model.randomClass.Name)
</th>
<th>
@Html.DisplayNameFor(model => model.ReportDate)
</th>
<th>
@Html.DisplayNameFor(model => model.Attachment)
</th>
<th></th>
</tr>
</thead>
<tfoot id="Table-Tfoot">
<tr>
<th>
@Html.DisplayNameFor(model => model.randomClass.Name)
</th>
<th>
@Html.DisplayNameFor(model => model.ReportDate)
</th>
<th>
@Html.DisplayNameFor(model => model.Attachment)
</th>
<th></th>
</tr>
</tfoot>
<tbody>
@foreach (var item in Model)
{
<tr>
<td>
@Html.DisplayFor(modelItem => item.randomClass.Name)
</td>
<td>
@Html.DisplayFor(modelItem => item.ReportDate)
</td>
<td>
<a href="@Url.Content(item.Attachment)" target="_blank">@Path.GetFileName(item.Attachment)</a>
</td>
<td>
@Html.ActionLink("Edit", "Edit", "tblAttachments", new { id = item.ID }, null) |
@Html.ActionLink("Delete", "Delete", "tblAttachments", new { id = item.ID })
</td>
</tr>
}
</tbody>
</table>
Estoy usando jQuery DataTables para buscar, buscar y ordenar. Aquí está mi jQuery.
@section scripts{
<script>
$(document).ready(function () {
// https://datatables.net/examples/api/multi_filter.html
var total = $("#Table tfoot th").length;
$("#Table tfoot th").each(function (index) {
if (index !== total - 1) {
var title = $(this).text().trim();
$(this).html(''<input type="text" class="form-control" placeholder="Search '' + title +''"/>'');
}
});
var table = $("#Test-Table").DataTable({
"bFilter": false // hide searchbox
});
table.columns().every(function () {
var that = this;
$(''input'', this.footer()).on(''keyup change'',
function () {
if (that.search() !== this.value) {
that
.search(this.value)
.draw();
}
});
});
});
</script>
}
Como puede ver, estoy ocultando el cuadro de búsqueda inicial que viene de serie con las tablas de datos jQuery ... porque me gustaría poder filtrar por rango de fechas .
He investigado esto , pero no me gusta cómo están los cuadros sobre la lista desplegable de paginación ... así que en el mío ... el cuadro de búsqueda en la esquina superior derecha se ha ido ... y me gustaría que las dos input tomaran en su lugar . ¿Cómo puedo hacer esto a través de CSS?
Cualquier ayuda es apreciada.
Así es como se ve ahora:
Prueba esta demo de plunker Espero que esto te haga obtener tu solución
http://plnkr.co/edit/mdeEYoZtnvpfHCdtSxDP?p=preview
$(function() {
var oTable = $(''#datatable'').DataTable({
"oLanguage": {
"sSearch": "Filter Data"
},
"iDisplayLength": -1,
"sPaginationType": "full_numbers",
});
$("#datepicker_from").datepicker({
showOn: "button",
buttonImage: "images/calendar.gif",
buttonImageOnly: false,
"onSelect": function(date) {
minDateFilter = new Date(date).getTime();
oTable.fnDraw();
}
}).keyup(function() {
minDateFilter = new Date(this.value).getTime();
oTable.fnDraw();
});
$("#datepicker_to").datepicker({
showOn: "button",
buttonImage: "images/calendar.gif",
buttonImageOnly: false,
"onSelect": function(date) {
maxDateFilter = new Date(date).getTime();
oTable.fnDraw();
}
}).keyup(function() {
maxDateFilter = new Date(this.value).getTime();
oTable.fnDraw();
});
});
// Date range filter
minDateFilter = "";
maxDateFilter = "";
$.fn.dataTableExt.afnFiltering.push(
function(oSettings, aData, iDataIndex) {
if (typeof aData._date == ''undefined'') {
aData._date = new Date(aData[0]).getTime();
}
if (minDateFilter && !isNaN(minDateFilter)) {
if (aData._date < minDateFilter) {
return false;
}
}
if (maxDateFilter && !isNaN(maxDateFilter)) {
if (aData._date > maxDateFilter) {
return false;
}
}
return true;
}
);
Este Bootstrap Datepicker ya puede mostrar un rango de datos, así que lo estoy usando con la opción: inpput-daterange que se ocupará de todas las cosas relacionadas con el rango:
- el rango de fechas seleccionado se muestra claramente con un color alternativo
- los botones claros para la fecha de inicio y la fecha de finalización ya están incorporados
- los cuadros de entrada ya están alineados y diseñados como controlgroup
Para alinear la select de paginación de registros de la DataTable, la muevo dentro del sistema de columnas de Bootstrap, por lo que aparece en la parte superior de la DataTable:
- el CSS para alinear el menú desplegable es solo cuestión de un margen superior e izquierdo
- el sistema de columna Bootstrap se puede configurar fácilmente para diferentes anchos de pantalla
En lugar de deshabilitar el cuadro de búsqueda, prefiero simplemente ocultarlo:
- puede mostrarlo y ocultarlo dinámicamente para cambiar entre el filtro de rango de fechas y la búsqueda de texto libre
- puede mantener las capacidades de búsqueda estándar de DataTable y usar la muestra provista en la Documentación tal como está
Aquí está el ejemplo completo:
var reportFilterRange = [null, null];
$(document).ready(function() {
$.fn.dataTable.ext.search.push(
function(settings, data, dataIndex) {
var date = Date.parse(data[1]);
if (reportFilterRange[0] && date < reportFilterRange[0]) return false;
if (reportFilterRange[1] && date > reportFilterRange[1]) return false;
return true;
}
);
var table = $("#Test-Table").DataTable({
columnDefs: [{
targets: [3],
"searchable": false
}, {
targets: [3],
"orderable": false
}]
});
$("#Test-Table_filter").css("display", "none");
$(".dataTables_length").detach().appendTo(''#lenContainer'');
$(''#report-date-filter'').on(''changeDate'', function(e) {
var cases = ["Min-Date", "Max-Date"];
reportFilterRange[cases.indexOf(e.target.id)] = Date.parse(e.date);
table.draw();
});
$("#report-date-filter").datepicker({
format: ''yyyy/mm/dd'',
clearBtn: true
});
});
#report-date-filter {
max-width: 240px !important;
}
.dataTables_length {
margin-left: 14px;
margin-top: 5px;
}
<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-type">
<meta content="width=device-width,initial-scale=1" name="viewport">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/css/bootstrap-datepicker.min.css" />
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.15/css/jquery.dataTables.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/js/bootstrap-datepicker.min.js"></script>
<script src="https://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js"></script>
</head>
<body>
<br>
<div class="row" id="filterRow">
<div id="lenContainer" class="col-xs-4">
</div>
<div class="col-xs-6">
<div class="input-daterange input-group" id="report-date-filter">
<input id="Min-Date" type="text" class="input-sm form-control" placeholder="Start Date" name="Min-Date" />
<span class="input-group-addon">to</span>
<input id="Max-Date" type="text" class="input-sm form-control" placeholder="End Date" name="Max-Date" />
</div>
</div>
</div>
<table id="Test-Table" class="table table-striped">
<thead>
<tr>
<th>
Class Name
</th>
<th>
Report Date
</th>
<th>
Attachment
</th>
<th></th>
</tr>
</thead>
<tfoot id="Table-Tfoot">
<tr>
<th>
Class Name
</th>
<th>
Report Date
</th>
<th>
Attachment
</th>
<th></th>
</tr>
</tfoot>
<tbody>
<tr>
<td>System Architect</td>
<td>2017/07/25</td>
<td><a href="javascript:void(0)" target="_blank">Tiger Nixon</a></td>
<td>
<div class="btn-group btn-group-sm">
<button type="button" class="btn btn-default">
<span class="glyphicon glyphicon-edit"></span>
</button>
<button type="button" class="btn btn-danger">
<span class="glyphicon glyphicon-trash"></span>
</button>
</div>
</td>
</tr>
<tr>
<td>Accountant</td>
<td>2017/07/24</td>
<td><a href="javascript:void(0)" target="_blank">Garrett Winters</a></td>
<td>
<div class="btn-group btn-group-sm">
<button type="button" class="btn btn-default">
<span class="glyphicon glyphicon-edit"></span>
</button>
<button type="button" class="btn btn-danger">
<span class="glyphicon glyphicon-trash"></span>
</button>
</div>
</td>
</tr>
<tr>
<td>Junior Technical Author</td>
<td>2009/01/12</td>
<td><a href="javascript:void(0)" target="_blank">Ashton Cox</a></td>
<td>
<div class="btn-group btn-group-sm">
<button type="button" class="btn btn-default">
<span class="glyphicon glyphicon-edit"></span>
</button>
<button type="button" class="btn btn-danger">
<span class="glyphicon glyphicon-trash"></span>
</button>
</div>
</td>
</tr>
<tr>
<td>Senior Javascript Developer</td>
<td>2012/03/29</td>
<td><a href="javascript:void(0)" target="_blank">Cedric Kelly</a></td>
<td>
<div class="btn-group btn-group-sm">
<button type="button" class="btn btn-default">
<span class="glyphicon glyphicon-edit"></span>
</button>
<button type="button" class="btn btn-danger">
<span class="glyphicon glyphicon-trash"></span>
</button>
</div>
</td>
</tr>
<tr>
<td>Accountant</td>
<td>2008/11/28</td>
<td><a href="javascript:void(0)" target="_blank">Airi Satou</a></td>
<td>
<div class="btn-group btn-group-sm">
<button type="button" class="btn btn-default">
<span class="glyphicon glyphicon-edit"></span>
</button>
<button type="button" class="btn btn-danger">
<span class="glyphicon glyphicon-trash"></span>
</button>
</div>
</td>
</tr>
<tr>
<td>Integration Specialist</td>
<td>2012/12/02</td>
<td><a href="javascript:void(0)" target="_blank">Brielle Williamson</a></td>
<td>
<div class="btn-group btn-group-sm">
<button type="button" class="btn btn-default">
<span class="glyphicon glyphicon-edit"></span>
</button>
<button type="button" class="btn btn-danger">
<span class="glyphicon glyphicon-trash"></span>
</button>
</div>
</td>
</tr>
<tr>
<td>Sales Assistant</td>
<td>2012/08/06</td>
<td><a href="javascript:void(0)" target="_blank">Herrod Chandler</a></td>
<td>
<div class="btn-group btn-group-sm">
<button type="button" class="btn btn-default">
<span class="glyphicon glyphicon-edit"></span>
</button>
<button type="button" class="btn btn-danger">
<span class="glyphicon glyphicon-trash"></span>
</button>
</div>
</td>
</tr>
<tr>
<td>Integration Specialist</td>
<td>2010/10/14</td>
<td><a href="javascript:void(0)" target="_blank">Rhona Davidson</a></td>
<td>
<div class="btn-group btn-group-sm">
<button type="button" class="btn btn-default">
<span class="glyphicon glyphicon-edit"></span>
</button>
<button type="button" class="btn btn-danger">
<span class="glyphicon glyphicon-trash"></span>
</button>
</div>
</td>
</tr>
<tr>
<td>Javascript Developer</td>
<td>2009/09/15</td>
<td><a href="javascript:void(0)" target="_blank">Colleen Hurst</a></td>
<td>
<div class="btn-group btn-group-sm">
<button type="button" class="btn btn-default">
<span class="glyphicon glyphicon-edit"></span>
</button>
<button type="button" class="btn btn-danger">
<span class="glyphicon glyphicon-trash"></span>
</button>
</div>
</td>
</tr>
<tr>
<td>Software Engineer</td>
<td>2008/12/13</td>
<td><a href="javascript:void(0)" target="_blank">Sonya Frost</a></td>
<td>
<div class="btn-group btn-group-sm">
<button type="button" class="btn btn-default">
<span class="glyphicon glyphicon-edit"></span>
</button>
<button type="button" class="btn btn-danger">
<span class="glyphicon glyphicon-trash"></span>
</button>
</div>
</td>
</tr>
<tr>
<td>Office Manager</td>
<td>2008/12/19</td>
<td><a href="javascript:void(0)" target="_blank">Jena Gaines</a></td>
<td>
<div class="btn-group btn-group-sm">
<button type="button" class="btn btn-default">
<span class="glyphicon glyphicon-edit"></span>
</button>
<button type="button" class="btn btn-danger">
<span class="glyphicon glyphicon-trash"></span>
</button>
</div>
</td>
</tr>
<tr>
<td>Support Lead</td>
<td>2013/03/03</td>
<td><a href="javascript:void(0)" target="_blank">Quinn Flynn</a></td>
<td>
<div class="btn-group btn-group-sm">
<button type="button" class="btn btn-default">
<span class="glyphicon glyphicon-edit"></span>
</button>
<button type="button" class="btn btn-danger">
<span class="glyphicon glyphicon-trash"></span>
</button>
</div>
</td>
</tr>
<tr>
<td>Regional Director</td>
<td>2008/10/16</td>
<td><a href="javascript:void(0)" target="_blank">Charde Marshall</a></td>
<td>
<div class="btn-group btn-group-sm">
<button type="button" class="btn btn-default">
<span class="glyphicon glyphicon-edit"></span>
</button>
<button type="button" class="btn btn-danger">
<span class="glyphicon glyphicon-trash"></span>
</button>
</div>
</td>
</tr>
<tr>
<td>Senior Marketing Designer</td>
<td>2012/12/18</td>
<td><a href="javascript:void(0)" target="_blank">Haley Kennedy</a></td>
<td>
<div class="btn-group btn-group-sm">
<button type="button" class="btn btn-default">
<span class="glyphicon glyphicon-edit"></span>
</button>
<button type="button" class="btn btn-danger">
<span class="glyphicon glyphicon-trash"></span>
</button>
</div>
</td>
</tr>
<tr>
<td>Regional Director</td>
<td>2010/03/17</td>
<td><a href="javascript:void(0)" target="_blank">Tatyana Fitzpatrick</a></td>
<td>
<div class="btn-group btn-group-sm">
<button type="button" class="btn btn-default">
<span class="glyphicon glyphicon-edit"></span>
</button>
<button type="button" class="btn btn-danger">
<span class="glyphicon glyphicon-trash"></span>
</button>
</div>
</td>
</tr>
<tr>
<td>Marketing Designer</td>
<td>2012/11/27</td>
<td><a href="javascript:void(0)" target="_blank">Michael Silva</a></td>
<td>
<div class="btn-group btn-group-sm">
<button type="button" class="btn btn-default">
<span class="glyphicon glyphicon-edit"></span>
</button>
<button type="button" class="btn btn-danger">
<span class="glyphicon glyphicon-trash"></span>
</button>
</div>
</td>
</tr>
<tr>
<td>Chief Financial Officer (CFO)</td>
<td>2010/06/09</td>
<td><a href="javascript:void(0)" target="_blank">Paul Byrd</a></td>
<td>
<div class="btn-group btn-group-sm">
<button type="button" class="btn btn-default">
<span class="glyphicon glyphicon-edit"></span>
</button>
<button type="button" class="btn btn-danger">
<span class="glyphicon glyphicon-trash"></span>
</button>
</div>
</td>
</tr>
<tr>
<td>Systems Administrator</td>
<td>2009/04/10</td>
<td><a href="javascript:void(0)" target="_blank">Gloria Little</a></td>
<td>
<div class="btn-group btn-group-sm">
<button type="button" class="btn btn-default">
<span class="glyphicon glyphicon-edit"></span>
</button>
<button type="button" class="btn btn-danger">
<span class="glyphicon glyphicon-trash"></span>
</button>
</div>
</td>
</tr>
<tr>
<td>Software Engineer</td>
<td>2012/10/13</td>
<td><a href="javascript:void(0)" target="_blank">Bradley Greer</a></td>
<td>
<div class="btn-group btn-group-sm">
<button type="button" class="btn btn-default">
<span class="glyphicon glyphicon-edit"></span>
</button>
<button type="button" class="btn btn-danger">
<span class="glyphicon glyphicon-trash"></span>
</button>
</div>
</td>
</tr>
<tr>
<td>Personnel Lead</td>
<td>2012/09/26</td>
<td><a href="javascript:void(0)" target="_blank">Dai Rios</a></td>
<td>
<div class="btn-group btn-group-sm">
<button type="button" class="btn btn-default">
<span class="glyphicon glyphicon-edit"></span>
</button>
<button type="button" class="btn btn-danger">
<span class="glyphicon glyphicon-trash"></span>
</button>
</div>
</td>
</tr>
<tr>
<td>Development Lead</td>
<td>2011/09/03</td>
<td><a href="javascript:void(0)" target="_blank">Jenette Caldwell</a></td>
<td>
<div class="btn-group btn-group-sm">
<button type="button" class="btn btn-default">
<span class="glyphicon glyphicon-edit"></span>
</button>
<button type="button" class="btn btn-danger">
<span class="glyphicon glyphicon-trash"></span>
</button>
</div>
</td>
</tr>
<tr>
<td>Chief Marketing Officer (CMO)</td>
<td>2009/06/25</td>
<td><a href="javascript:void(0)" target="_blank">Yuri Berry</a></td>
<td>
<div class="btn-group btn-group-sm">
<button type="button" class="btn btn-default">
<span class="glyphicon glyphicon-edit"></span>
</button>
<button type="button" class="btn btn-danger">
<span class="glyphicon glyphicon-trash"></span>
</button>
</div>
</td>
</tr>
<tr>
<td>Pre-Sales Support</td>
<td>2011/12/12</td>
<td><a href="javascript:void(0)" target="_blank">Caesar Vance</a></td>
<td>
<div class="btn-group btn-group-sm">
<button type="button" class="btn btn-default">
<span class="glyphicon glyphicon-edit"></span>
</button>
<button type="button" class="btn btn-danger">
<span class="glyphicon glyphicon-trash"></span>
</button>
</div>
</td>
</tr>
<tr>
<td>Sales Assistant</td>
<td>2010/09/20</td>
<td><a href="javascript:void(0)" target="_blank">Doris Wilder</a></td>
<td>
<div class="btn-group btn-group-sm">
<button type="button" class="btn btn-default">
<span class="glyphicon glyphicon-edit"></span>
</button>
<button type="button" class="btn btn-danger">
<span class="glyphicon glyphicon-trash"></span>
</button>
</div>
</td>
</tr>
<tr>
<td>Chief Executive Officer (CEO)</td>
<td>2009/10/09</td>
<td><a href="javascript:void(0)" target="_blank">Angelica Ramos</a></td>
<td>
<div class="btn-group btn-group-sm">
<button type="button" class="btn btn-default">
<span class="glyphicon glyphicon-edit"></span>
</button>
<button type="button" class="btn btn-danger">
<span class="glyphicon glyphicon-trash"></span>
</button>
</div>
</td>
</tr>
<tr>
<td>Developer</td>
<td>2010/12/22</td>
<td><a href="javascript:void(0)" target="_blank">Gavin Joyce</a></td>
<td>
<div class="btn-group btn-group-sm">
<button type="button" class="btn btn-default">
<span class="glyphicon glyphicon-edit"></span>
</button>
<button type="button" class="btn btn-danger">
<span class="glyphicon glyphicon-trash"></span>
</button>
</div>
</td>
</tr>
<tr>
<td>Regional Director</td>
<td>2010/11/14</td>
<td><a href="javascript:void(0)" target="_blank">Jennifer Chang</a></td>
<td>
<div class="btn-group btn-group-sm">
<button type="button" class="btn btn-default">
<span class="glyphicon glyphicon-edit"></span>
</button>
<button type="button" class="btn btn-danger">
<span class="glyphicon glyphicon-trash"></span>
</button>
</div>
</td>
</tr>
<tr>
<td>Software Engineer</td>
<td>2011/06/07</td>
<td><a href="javascript:void(0)" target="_blank">Brenden Wagner</a></td>
<td>
<div class="btn-group btn-group-sm">
<button type="button" class="btn btn-default">
<span class="glyphicon glyphicon-edit"></span>
</button>
<button type="button" class="btn btn-danger">
<span class="glyphicon glyphicon-trash"></span>
</button>
</div>
</td>
</tr>
<tr>
<td>Chief Operating Officer (COO)</td>
<td>2010/03/11</td>
<td><a href="javascript:void(0)" target="_blank">Fiona Green</a></td>
<td>
<div class="btn-group btn-group-sm">
<button type="button" class="btn btn-default">
<span class="glyphicon glyphicon-edit"></span>
</button>
<button type="button" class="btn btn-danger">
<span class="glyphicon glyphicon-trash"></span>
</button>
</div>
</td>
</tr>
<tr>
<td>Regional Marketing</td>
<td>2011/08/14</td>
<td><a href="javascript:void(0)" target="_blank">Shou Itou</a></td>
<td>
<div class="btn-group btn-group-sm">
<button type="button" class="btn btn-default">
<span class="glyphicon glyphicon-edit"></span>
</button>
<button type="button" class="btn btn-danger">
<span class="glyphicon glyphicon-trash"></span>
</button>
</div>
</td>
</tr>
<tr>
<td>Integration Specialist</td>
<td>2011/06/02</td>
<td><a href="javascript:void(0)" target="_blank">Michelle House</a></td>
<td>
<div class="btn-group btn-group-sm">
<button type="button" class="btn btn-default">
<span class="glyphicon glyphicon-edit"></span>
</button>
<button type="button" class="btn btn-danger">
<span class="glyphicon glyphicon-trash"></span>
</button>
</div>
</td>
</tr>
<tr>
<td>Developer</td>
<td>2009/10/22</td>
<td><a href="javascript:void(0)" target="_blank">Suki Burks</a></td>
<td>
<div class="btn-group btn-group-sm">
<button type="button" class="btn btn-default">
<span class="glyphicon glyphicon-edit"></span>
</button>
<button type="button" class="btn btn-danger">
<span class="glyphicon glyphicon-trash"></span>
</button>
</div>
</td>
</tr>
<tr>
<td>Technical Author</td>
<td>2011/05/07</td>
<td><a href="javascript:void(0)" target="_blank">Prescott Bartlett</a></td>
<td>
<div class="btn-group btn-group-sm">
<button type="button" class="btn btn-default">
<span class="glyphicon glyphicon-edit"></span>
</button>
<button type="button" class="btn btn-danger">
<span class="glyphicon glyphicon-trash"></span>
</button>
</div>
</td>
</tr>
<tr>
<td>Team Leader</td>
<td>2008/10/26</td>
<td><a href="javascript:void(0)" target="_blank">Gavin Cortez</a></td>
<td>
<div class="btn-group btn-group-sm">
<button type="button" class="btn btn-default">
<span class="glyphicon glyphicon-edit"></span>
</button>
<button type="button" class="btn btn-danger">
<span class="glyphicon glyphicon-trash"></span>
</button>
</div>
</td>
</tr>
<tr>
<td>Post-Sales support</td>
<td>2011/03/09</td>
<td><a href="javascript:void(0)" target="_blank">Martena Mccray</a></td>
<td>
<div class="btn-group btn-group-sm">
<button type="button" class="btn btn-default">
<span class="glyphicon glyphicon-edit"></span>
</button>
<button type="button" class="btn btn-danger">
<span class="glyphicon glyphicon-trash"></span>
</button>
</div>
</td>
</tr>
<tr>
<td>Marketing Designer</td>
<td>2009/12/09</td>
<td><a href="javascript:void(0)" target="_blank">Unity Butler</a></td>
<td>
<div class="btn-group btn-group-sm">
<button type="button" class="btn btn-default">
<span class="glyphicon glyphicon-edit"></span>
</button>
<button type="button" class="btn btn-danger">
<span class="glyphicon glyphicon-trash"></span>
</button>
</div>
</td>
</tr>
</tbody>
</table>
</body>
</html>