Base BootStrap DataTable
by Dominic Myers
HTML
<script src="//cdn.datatables.net/1.10.7/js/jquery.dataTables.min.js"></script>
<script src="//cdn.datatables.net/plug-ins/1.10.7/integration/bootstrap/3/dataTables.bootstrap.js"></script>
<link rel="stylesheet" href="//cdn.datatables.net/plug-ins/1.10.7/integration/bootstrap/3/dataTables.bootstrap.css">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<div class="container">
<!--<button class="btn btn-primary" id="order-by-name" data-target="1" data-direction="asc">Order By Name</button>-->
<table id="example" class="table table-striped table-bordered" cellspacing="0" width="100%">
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Position</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Tiger Nixon</td>
<td>System, Architect (안녕하세요)</td>
</tr>
<tr>
<td>2</td>
<td>Garrett Winters</td>
<td>Accountant</td>
</tr>
<tr>
<td>3</td>
<td>Ashton Cox</td>
<td>Junior, Technical, Author</td>
</tr>
<tr>
<td>4</td>
<td>Cedric Kelly</td>
<td>Senior, Javascript, Developer</td>
</tr>
<tr>
<td>5</td>
<td>Airi Satou</td>
<td>Accountant</td>
</tr>
<tr>
<td>6</td>
<td>Brielle Williamson</td>
<td>Integration, Specialist</td>
</tr>
<tr>
<td>7</td>
<td>Herrod Chandler</td>
<td>Sales, Assistant</td>
</tr>
<tr>
<td>8</td>
...
JavaScript
var table = $('#example').DataTable({
columns: [
null,
null,
{
"render": function(data, type, row){
return data.split(", ").join("<br/>");
}
}
]
});
/*
$("#order-by-name").click(function(){
var data = $(this).data();
table.order([parseInt(data.target, 10), data.direction]).draw();
$(this).data("direction", (data.direction === "asc") ? "desc" : "asc" );
});
*/