forked from DGNum/gestioCOF
Move stupidtable import to base.html
Aussi, on déplace les fichiers JS associés dans `static/gestioncof/vendor/`
This commit is contained in:
Ludovic Stephan
Ludovic Stephan
parent
6fba63846a
commit
0100a9a62e
|
|
@ -42,9 +42,6 @@
|
|||
Total : {{ total }} place{{ total|pluralize }} demandée{{ total|pluralize }}
|
||||
sur {{ proposed }} place{{ proposed|pluralize }} proposée{{ proposed|pluralize }}
|
||||
</span>
|
||||
<script type="text/javascript"
|
||||
src="{% static "js/joequery-Stupid-Table-Plugin/stupidtable.js" %}">
|
||||
</script>
|
||||
<script type="text/javascript">
|
||||
$(function(){
|
||||
$("table.etat-bda").stupidtable();
|
||||
|
|
|
|||
|
|
@ -56,9 +56,6 @@
|
|||
<a href="{% url 'bda-rappels' spectacle.id %}">Page d'envoi manuel des mails de rappel</a>
|
||||
</div>
|
||||
|
||||
<script type="text/javascript"
|
||||
src="{% static "js/joequery-Stupid-Table-Plugin/stupidtable.js" %}"></script>
|
||||
<script>
|
||||
function toggle(id) {
|
||||
var pre = document.getElementById(id) ;
|
||||
pre.style.display = pre.style.display == "none" ? "block" : "none" ;
|
||||
|
|
|
|||
|
|
@ -104,7 +104,6 @@
|
|||
<p>Plus de reventes possibles !</p>
|
||||
{% endif %}
|
||||
|
||||
<script type="text/javascript" src="{% static "js/joequery-Stupid-Table-Plugin/stupidtable.js" %}"></script>
|
||||
<script language="JavaScript">
|
||||
$(function(){
|
||||
$("table.stupidtable").stupidtable();
|
||||
|
|
|
|||
|
|
@ -42,7 +42,6 @@
|
|||
value="S'inscrire pour les places sélectionnées">
|
||||
</form>
|
||||
|
||||
<script type="text/javascript" src="{% static "js/joequery-Stupid-Table-Plugin/stupidtable.js" %}"></script>
|
||||
<script language="JavaScript">
|
||||
function select(check) {
|
||||
checkboxes = document.getElementsByName("spectacles");
|
||||
|
|
|
|||
|
|
@ -81,7 +81,6 @@
|
|||
</div>
|
||||
{% endif %}
|
||||
|
||||
<script type="text/javascript" src="{% static "js/joequery-Stupid-Table-Plugin/stupidtable.js" %}"></script>
|
||||
<script language="JavaScript">
|
||||
$(function(){
|
||||
$("table.stupidtable").stupidtable();
|
||||
|
|
|
|||
|
|
@ -32,9 +32,7 @@
|
|||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
<script type="text/javascript"
|
||||
src="{% static "js/joequery-Stupid-Table-Plugin/stupidtable.js" %}">
|
||||
</script>
|
||||
|
||||
<script type="text/javascript">
|
||||
$(function(){
|
||||
$("table.etat-bda").stupidtable();
|
||||
|
|
|
|||
|
|
@ -1,19 +0,0 @@
|
|||
Copyright (c) 2012 Joseph McCullough
|
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||
of this software and associated documentation files (the "Software"), to deal
|
||||
in the Software without restriction, including without limitation the rights
|
||||
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||
copies of the Software, and to permit persons to whom the Software is
|
||||
furnished to do so, subject to the following conditions:
|
||||
|
||||
The above copyright notice and this permission notice shall be included in all
|
||||
copies or substantial portions of the Software.
|
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||||
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||||
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
||||
SOFTWARE.
|
||||
|
|
@ -1,166 +0,0 @@
|
|||
Stupid jQuery Table Sort
|
||||
========================
|
||||
|
||||
This is a stupid jQuery table sorting plugin. Nothing fancy, nothing really
|
||||
impressive. Overall, stupidly simple.
|
||||
|
||||
[View the demo here][0]
|
||||
|
||||
See the example.html document to see how to implement it.
|
||||
|
||||
|
||||
Example Usage
|
||||
-------------
|
||||
|
||||
The JS:
|
||||
|
||||
$("table").stupidtable();
|
||||
|
||||
The HTML:
|
||||
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th data-sort="int">int</th>
|
||||
<th data-sort="float">float</th>
|
||||
<th data-sort="string">string</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>15</td>
|
||||
<td>-.18</td>
|
||||
<td>banana</td>
|
||||
</tr>
|
||||
...
|
||||
...
|
||||
...
|
||||
|
||||
The thead and tbody tags must be used.
|
||||
|
||||
Add a `data-sort` attribute of "DATATYPE" to the th elements to make them sortable
|
||||
by that data type. If you don't want that column to be sortable, just omit the
|
||||
`data-sort` attribute.
|
||||
|
||||
|
||||
Predefined data types
|
||||
---------------------
|
||||
|
||||
Our aim is to keep this plugin as lightweight as possible. Consequently, the
|
||||
only predefined datatypes that you can pass to the th elements are
|
||||
|
||||
* `int`
|
||||
* `float`
|
||||
* `string` (case-sensitive)
|
||||
* `string-ins` (case-insensitive)
|
||||
|
||||
These data types will be sufficient for many simple tables. However, if you need
|
||||
different data types for sorting, you can easily create your own!
|
||||
|
||||
|
||||
Creating your own data types
|
||||
----------------------------
|
||||
|
||||
Creating your own data type for sorting purposes is easy as long as you are
|
||||
comfortable using custom functions for sorting. Consult [Mozilla's Docs][1]
|
||||
if you're not.
|
||||
|
||||
Let's create an alphanum datatype for a User ID that takes strings in the
|
||||
form "D10", "A40", and sorts them based on the number.
|
||||
|
||||
<thead>
|
||||
<tr>
|
||||
<th data-sort="string">Name</th>
|
||||
<th data-sort="int">Age</th>
|
||||
<th data-sort="alphanum">UserID</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Joseph McCullough</td>
|
||||
<td>20</td>
|
||||
<td>D10</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Justin Edwards</td>
|
||||
<td>29</td>
|
||||
<td>A40</td>
|
||||
</tr>
|
||||
...
|
||||
...
|
||||
...
|
||||
|
||||
Now we need to specify how the **alphanum** type will be sorted. To do that,
|
||||
we do the following:
|
||||
|
||||
$("table").stupidtable({
|
||||
"alphanum":function(a,b){
|
||||
|
||||
var pattern = "^[A-Z](\\d+)$";
|
||||
var re = new RegExp(pattern);
|
||||
|
||||
var aNum = re.exec(a).slice(1);
|
||||
var bNum = re.exec(b).slice(1);
|
||||
|
||||
return parseInt(aNum,10) - parseInt(bNum,10);
|
||||
}
|
||||
});
|
||||
|
||||
This extracts the integers from the cell and compares them in the style
|
||||
that sort functions use.
|
||||
|
||||
|
||||
Callbacks
|
||||
---------
|
||||
|
||||
To execute a callback function after a table column has been sorted, you can
|
||||
bind on `aftertablesort`.
|
||||
|
||||
var table = $("table").stupidtable();
|
||||
table.bind('aftertablesort', function (event, data) {
|
||||
// data.column - the index of the column sorted after a click
|
||||
// data.direction - the sorting direction (either asc or desc)
|
||||
// $(this) - this table object
|
||||
|
||||
console.log("The sorting direction: " + data.direction);
|
||||
console.log("The column index: " + data.column);
|
||||
});
|
||||
|
||||
Similarly, to execute a callback before a table column has been sorted, you can
|
||||
bind on `beforetablesort`.
|
||||
|
||||
See the complex_example.html file.
|
||||
|
||||
|
||||
Data with multiple representations/predefined order
|
||||
---------------------------------------------------
|
||||
|
||||
Often we find two distinct ways of offering data: In a machine friendly way,
|
||||
and a Human-friendly way. A clear example is a Timestamp. Additionally,
|
||||
arbitrary data values may already have a predefined sort order. In either case,
|
||||
it's to our advantage to have a way to store the "sortable data" while letting
|
||||
the viewer see the Human-friendly representation of that data. While the
|
||||
purpose of the custom sort methods is to take data and make it sortable
|
||||
(machine friendly), sometimes this is too hard or too expensive, computationally
|
||||
speaking.
|
||||
|
||||
To solve this problem, you can specify a `data-sort-value` attribute to
|
||||
table cells, and the attribute value will be the basis of the sort as opposed
|
||||
to the text value of the table cell. See the complex_example.html file, where
|
||||
we sort a column of letters based not on their alphabetical order, but by their
|
||||
frequency in the English language. You'll still need to specify a sort type
|
||||
or come up with your own custom sort function, but the presence of the
|
||||
`data-sort-value` attribute tells the plugin to use the value of the
|
||||
attribute as the basis of the sort.
|
||||
|
||||
|
||||
License
|
||||
-------
|
||||
|
||||
The Stupid jQuery Plugin is licensed under the MIT license. See the LICENSE
|
||||
file for full details.
|
||||
|
||||
|
||||
|
||||
[0]: http://joequery.github.com/Stupid-Table-Plugin/
|
||||
[1]: https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Array/sort
|
||||
|
|
@ -1,77 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Stupid jQuery table sort</title>
|
||||
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
|
||||
<script src="../stupidtable.js?dev"></script>
|
||||
<script>
|
||||
$(function(){
|
||||
$("table").stupidtable();
|
||||
});
|
||||
</script>
|
||||
<style type="text/css">
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
}
|
||||
th, td {
|
||||
padding: 5px 10px;
|
||||
border: 1px solid #999;
|
||||
}
|
||||
th {
|
||||
background-color: #eee;
|
||||
}
|
||||
th[data-sort]{
|
||||
cursor:pointer;
|
||||
}
|
||||
tr.awesome{
|
||||
color: red;
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<h1>Stupid jQuery table sort!</h1>
|
||||
|
||||
<p>This example shows how a sortable table can be implemented with very little configuration. Simply specify the data type on a <code><th></code> element using the <code>data-sort</code> attribute, and the plugin handles the rest.</p>
|
||||
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th data-sort="int">int</th>
|
||||
<th data-sort="float">float</th>
|
||||
<th data-sort="string">string</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>15</td>
|
||||
<td>-.18</td>
|
||||
<td>banana</td>
|
||||
</tr>
|
||||
<tr class="awesome">
|
||||
<td>95</td>
|
||||
<td>36</td>
|
||||
<td>coke</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>2</td>
|
||||
<td>-152.5</td>
|
||||
<td>apple</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>-53</td>
|
||||
<td>88.5</td>
|
||||
<td>zebra</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>195</td>
|
||||
<td>-858</td>
|
||||
<td>orange</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,70 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Stupid jQuery table sort (colspan test)</title>
|
||||
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
|
||||
<script src="../stupidtable.js?dev"></script>
|
||||
<script>
|
||||
$(function(){
|
||||
$("table").stupidtable();
|
||||
});
|
||||
</script>
|
||||
<style type="text/css">
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
}
|
||||
th, td {
|
||||
padding: 5px 10px;
|
||||
border: 1px solid #999;
|
||||
}
|
||||
th {
|
||||
background-color: #eee;
|
||||
}
|
||||
th[data-sort]{
|
||||
cursor:pointer;
|
||||
}
|
||||
tr.awesome{
|
||||
color: red;
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<h1>Stupid jQuery table sort! (colspan test)</h1>
|
||||
|
||||
<p>Tables using colspans are handled just fine.</p>
|
||||
|
||||
<table id="stupid">
|
||||
<thead>
|
||||
<tr>
|
||||
<th data-sort="string">Letter</td>
|
||||
<th colspan="2" data-sort="string">colspan=2</th>
|
||||
<th data-sort="int">Number</td>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>def</td>
|
||||
<td>X</td>
|
||||
<td>9</td>
|
||||
<td>1</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>abc</td>
|
||||
<td>Z</td>
|
||||
<td>8</td>
|
||||
<td>2</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>bcd</td>
|
||||
<td>Y</td>
|
||||
<td>7</td>
|
||||
<td>0</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,183 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Stupid jQuery table sort (complex example)</title>
|
||||
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
|
||||
<script src="../stupidtable.js?dev"></script>
|
||||
<script>
|
||||
$(function(){
|
||||
// Helper function to convert a string of the form "Mar 15, 1987" into
|
||||
// a Date object.
|
||||
var date_from_string = function(str){
|
||||
var months = ["jan","feb","mar","apr","may","jun","jul",
|
||||
"aug","sep","oct","nov","dec"];
|
||||
var pattern = "^([a-zA-Z]{3})\\s*(\\d{2}),\\s*(\\d{4})$";
|
||||
var re = new RegExp(pattern);
|
||||
var DateParts = re.exec(str).slice(1);
|
||||
|
||||
var Year = DateParts[2];
|
||||
var Month = $.inArray(DateParts[0].toLowerCase(), months);
|
||||
var Day = DateParts[1];
|
||||
return new Date(Year, Month, Day);
|
||||
}
|
||||
|
||||
var moveBlanks = function(a, b) {
|
||||
if ( a < b ){
|
||||
if (a == "")
|
||||
return 1;
|
||||
else
|
||||
return -1;
|
||||
}
|
||||
if ( a > b ){
|
||||
if (b == "")
|
||||
return -1;
|
||||
else
|
||||
return 1;
|
||||
}
|
||||
return 0;
|
||||
};
|
||||
var moveBlanksDesc = function(a, b) {
|
||||
// Blanks are by definition the smallest value, so we don't have to
|
||||
// worry about them here
|
||||
if ( a < b )
|
||||
return 1;
|
||||
if ( a > b )
|
||||
return -1;
|
||||
return 0;
|
||||
};
|
||||
|
||||
var table = $("table").stupidtable({
|
||||
"date":function(a,b){
|
||||
// Get these into date objects for comparison.
|
||||
|
||||
aDate = date_from_string(a);
|
||||
bDate = date_from_string(b);
|
||||
|
||||
return aDate - bDate;
|
||||
},
|
||||
"moveBlanks": moveBlanks,
|
||||
"moveBlanksDesc": moveBlanksDesc,
|
||||
});
|
||||
|
||||
table.on("beforetablesort", function (event, data) {
|
||||
// data.column - the index of the column sorted after a click
|
||||
// data.direction - the sorting direction (either asc or desc)
|
||||
$("#msg").text("Sorting index " + data.column)
|
||||
});
|
||||
|
||||
table.on("aftertablesort", function (event, data) {
|
||||
var th = $(this).find("th");
|
||||
th.find(".arrow").remove();
|
||||
var dir = $.fn.stupidtable.dir;
|
||||
|
||||
var arrow = data.direction === dir.ASC ? "↑" : "↓";
|
||||
th.eq(data.column).append('<span class="arrow">' + arrow +'</span>');
|
||||
});
|
||||
|
||||
$("tr").slice(1).click(function(){
|
||||
$(".awesome").removeClass("awesome");
|
||||
$(this).addClass("awesome");
|
||||
});
|
||||
|
||||
});
|
||||
</script>
|
||||
<style type="text/css">
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
}
|
||||
th, td {
|
||||
padding: 5px 10px;
|
||||
border: 1px solid #999;
|
||||
}
|
||||
th {
|
||||
background-color: #eee;
|
||||
}
|
||||
th[data-sort]{
|
||||
cursor:pointer;
|
||||
}
|
||||
tr.awesome{
|
||||
color: red;
|
||||
}
|
||||
#msg {
|
||||
color: green;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<h1>Stupid jQuery table sort! (complex example)</h1>
|
||||
|
||||
<p>This example showcases several of the more advanced features, including specifying sort values, custom data types and callbacks. View the source of this file or see the <a href="http://joequery.github.com/Stupid-Table-Plugin/">documentation</a> for more details on how to implement them.</p>
|
||||
|
||||
<p id="msg"> </p>
|
||||
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th data-sort="int">int</th>
|
||||
<th data-sort="int">int</th>
|
||||
<th data-sort="float">float</th>
|
||||
<th data-sort="moveBlanks" data-sort-desc="moveBlanksDesc">string</th>
|
||||
<th data-sort="string-ins">case</th>
|
||||
<th>Can't sort me!</th>
|
||||
<th data-sort="date">date</th>
|
||||
<th data-sort="int">Letter frequency</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>15</td>
|
||||
<td>15</td>
|
||||
<td>-.18</td>
|
||||
<td>banana</td>
|
||||
<td>Homer</td>
|
||||
<td>arbitrary</td>
|
||||
<td>Sep 15, 2002</td>
|
||||
<td data-sort-value="0">E</td>
|
||||
</tr>
|
||||
<tr class="awesome">
|
||||
<td>95</td>
|
||||
<td>95</td>
|
||||
<td>36</td>
|
||||
<td></td>
|
||||
<td>purple</td>
|
||||
<td>pointless</td>
|
||||
<td>Aug 07, 2004</td>
|
||||
<td data-sort-value="1">T</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>2</td>
|
||||
<td>2</td>
|
||||
<td>-152.5</td>
|
||||
<td></td>
|
||||
<td>is</td>
|
||||
<td>silly</td>
|
||||
<td>Mar 15, 1986</td>
|
||||
<td data-sort-value="2">A</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>-53</td>
|
||||
<td>-53</td>
|
||||
<td>88.5</td>
|
||||
<td>hello</td>
|
||||
<td>a</td>
|
||||
<td>eccentric</td>
|
||||
<td>Feb 27, 2086</td>
|
||||
<td data-sort-value="3">O</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>195</td>
|
||||
<td>195</td>
|
||||
<td>-858</td>
|
||||
<td>orange</td>
|
||||
<td>fruit</td>
|
||||
<td>garbage</td>
|
||||
<td>Mar 15, 1986</td>
|
||||
<td data-sort-value="4">I</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
File diff suppressed because it is too large
Load diff
|
|
@ -18,6 +18,7 @@
|
|||
{# JS #}
|
||||
<script src="https://code.jquery.com/jquery-3.1.0.min.js" integrity="sha256-cCueBR6CsyA4/9szpPfrX3s49M9vUU5BgtiJj06wt/s=" crossorigin="anonymous"></script>
|
||||
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
|
||||
<script src="{% static 'gestioncof/vendor/stupidtable.min.js' %}"></script>
|
||||
{% block extra_head %}{% endblock %}
|
||||
</head>
|
||||
<body>
|
||||
|
|
|
|||
Loading…
Reference in a new issue