mirror of
https://github.com/invoiceninja/invoiceninja.git
synced 2024-11-14 07:02:34 +01:00
84 lines
3.2 KiB
HTML
84 lines
3.2 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<meta name="description" content="">
|
|
<meta name="author" content="">
|
|
<title>Datatables</title>
|
|
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
|
|
<link rel="stylesheet" href="css/datatables.css">
|
|
</head>
|
|
<body>
|
|
<div class="jumbotron">
|
|
<div class="container">
|
|
<h1>Bootstrap3 plugin for datatable</h1>
|
|
<p>This plugin adds tweaks for datatable UI to render correctly.</p>
|
|
</div>
|
|
</div>
|
|
<div class="container">
|
|
<div class="row">
|
|
<div class="panel panel-success">
|
|
<div class="panel-heading">Files & Code</div>
|
|
<div class="panel-body">
|
|
<link rel="stylesheet" href="css/datatables.css"><br>
|
|
<script src="js/datatables.js"></script><br><br>
|
|
|
|
// Html code <br>
|
|
<table class="datatable table table-striped table-bordered"><br>
|
|
</table><br><br>
|
|
// Javascript code <br>
|
|
$('.datatable').dataTable();<br>
|
|
$('.datatable').each(function(){<br>
|
|
var datatable = $(this);<br>
|
|
var search_input = datatable.closest('.dataTables_wrapper').find('div[id$=_filter] input');<br>
|
|
search_input.attr('placeholder', 'Search');<br>
|
|
search_input.addClass('form-control input-sm');<br>
|
|
var length_sel = datatable.closest('.dataTables_wrapper').find('div[id$=_length] select');<br>
|
|
length_sel.addClass('form-control input-sm');<br>
|
|
});<br>
|
|
</div>
|
|
</div>
|
|
<div class="panel panel-primary">
|
|
<div class="panel-heading">Pagination types</div>
|
|
<div class="panel-body">
|
|
<div class="col-sm-3">
|
|
<code>
|
|
$('.datatable').dataTable({<br>
|
|
"sPaginationType": "bs_normal"<br>
|
|
});
|
|
</code>
|
|
<p><a class="btn btn-primary" href="examples/pagination_normal.html" target="_blank">View Default »</a></p>
|
|
</div>
|
|
<div class="col-sm-3">
|
|
<code>
|
|
$('.datatable').dataTable({<br>
|
|
"sPaginationType": "bs_two_button"<br>
|
|
});
|
|
</code>
|
|
<p><a class="btn btn-primary" href="examples/pagination_two_buttons.html" target="_blank">View Two buttons »</a></p>
|
|
</div>
|
|
<div class="col-sm-3">
|
|
<code>
|
|
$('.datatable').dataTable({<br>
|
|
"sPaginationType": "bs_four_button"<br>
|
|
});
|
|
</code>
|
|
<p><a class="btn btn-primary" href="examples/pagination_four_buttons.html" target="_blank">View Four buttons »</a></p>
|
|
</div>
|
|
<div class="col-sm-3">
|
|
<code>
|
|
$('.datatable').dataTable({<br>
|
|
"sPaginationType": "bs_full"<br>
|
|
});
|
|
</code>
|
|
<p><a class="btn btn-primary" href="examples/pagination_full.html" target="_blank">View Complete »</a></p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
|
|
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
|
|
</body>
|
|
</html> |