Table data now taken from a JSON source

This commit is contained in:
Gonzalo Bellver 2011-10-11 11:20:12 -03:00
parent de38d2ffb2
commit 657418411f
5 changed files with 76 additions and 33 deletions

View File

@ -32,7 +32,7 @@ body {
margin: 0 auto; margin: 0 auto;
width: @body-width; width: @body-width;
position: relative; position: relative;
padding: 10px; padding: @base-padding;
} }
.rounded-corners (@radius: 5px) { .rounded-corners (@radius: 5px) {
@ -51,10 +51,8 @@ body {
width: @tags-width; width: @tags-width;
padding: @tags-padding; padding: @tags-padding;
float: left; float: left;
border: @tags-border-size solid @base-color * 3; border: @tags-border-size solid @base-color * 5;
border-right: none; border-right: none;
position: relative;
top: 52px;
h2 { h2 {
font-size: @base-font-size * 1.5; font-size: @base-font-size * 1.5;
@ -79,12 +77,16 @@ body {
#map-table { #map-table {
width: @table-width; width: @table-width;
display: inline-block; display: inline-block;
border: @base-border-size solid @base-color * 5;
} }
/* ----------------------------- Toolbar -------------------------------- */ /* ----------------------------- Toolbar -------------------------------- */
#toolbar { #toolbar {
width: 100%; border: @tags-border-size solid @base-color * 11;
height: 20px; padding: @base-padding;
border: @tags-border-size solid @base-color * 3; margin-bottom: @base-margin * 2;
} }
/* ----------------------------- Buttons -------------------------------- */

View File

@ -34,8 +34,6 @@
} }
.dataTables_filter { .dataTables_filter {
width: 50%;
float: right;
text-align: right; text-align: right;
margin-bottom: 10px; margin-bottom: 10px;
} }

Binary file not shown.

Before

Width:  |  Height:  |  Size: 894 B

View File

@ -0,0 +1,15 @@
{ "aaData": [
["1", "Fonctionnel plateforme", "moi", "14/06/2011", "moi"],
["2", "Comportement topic", "moi, Olivier, Nicolas", "14/06/2011", "Olivier"],
["3", "TM Blog", "moi", "14/06/2011", "moi"],
["4", "Bloom", "moi", "13/06/2011", "moi"],
["5", "Morning Mr. Magpie", "moi, Martin", "10/06/2011", "Martin"],
["6", "Little By Little", "moi, Sophie", "1/06/2011", "Sophie"],
["7", "Feral", "moi", "14/05/2011", "moi"],
["8", "Lotus Flower", "moi, Sophie, Olivier", "13/05/2011", "Olivier"],
["9", "Codex", "moi", "30/04/2011", "moi"],
["10", "Give Up The Ghost", "moi, Olivier", "30/04/2011", "moi"],
["11", "Separator", "moi, Olivier, Nicolas, Sophie", "02/04/2011", "Olivier"],
["12", "Supercollider", "moi, Olivier", "02/04/2011", "Olivier"],
["13", "The Butcher", "moi", "01/04/2011", "moi"]
]}

View File

@ -17,39 +17,50 @@
<link href="css/ui-lightness/jquery-ui-1.8.16.custom.css" rel="stylesheet"> <link href="css/ui-lightness/jquery-ui-1.8.16.custom.css" rel="stylesheet">
<script type="text/javascript" language="javascript" src="js/jquery.dataTables.js"></script> <script type="text/javascript" language="javascript" src="js/jquery.dataTables.js"></script>
<script type="text/javascript" charset="utf-8"> <script type="text/javascript" charset="utf-8">
/* Data set - can contain whatever information you want */
var mapSet = [
['Fonctionnel plateforme', 'moi', '14/06/2011 moi', '>'],
['Comportement topic', 'moi, Olivier, Nicolas', '14/06/2011 Olivier', '>'],
['TM Blog', 'moi', '14/06/2011 moi', '>'],
['Bloom', 'moi', '13/06/2011 moi', '>'],
['Morning Mr. Magpie', 'moi, Martin', '10/06/2011 Martin', '>'],
['Little By Little', 'moi, Sophie', '1/06/2011 Sophie', '>'],
['Feral', 'moi', '14/05/2011 moi', '>'],
['Lotus Flower', 'moi, Sophie, Olivier', '13/05/2011 Olivier', '>'],
['Codex', 'moi', '30/04/2011 moi', '>'],
['Give Up The Ghost', 'moi, Olivier', '30/04/2011 moi', '>'],
['Separator', 'moi, Olivier, Nicolas, Sophie', '02/04/2011 Olivier', '>'],
['Supercollider', 'moi, Olivier', '02/04/2011 Olivier', '>'],
['The Butcher', 'moi', '01/04/2011 moi', '>']
];
$(function() { $(function() {
$('#map-table').html( '<table cellpadding="0" cellspacing="0" border="0" class="display" id="maps"></table>' ); $('#map-table').html( '<table cellpadding="0" cellspacing="0" border="0" class="display" id="maps"></table>' );
$('#maps').dataTable( { $('#maps').dataTable( {
"aaData": mapSet, "bProcessing" : true,
"sAjaxSource" : "json_source.txt",
"aoColumns": [ "aoColumns": [
{
"sTitle" : '<input type="checkbox"/>',
"sClass" : "center",
"sWidth" : "15px",
"bSortable" : false,
"fnRender" : function(obj) {
return obj.aData[0];
}
},
{ "sTitle": "Titre" }, { "sTitle": "Titre" },
{ "sTitle": "Utillisateurs" }, { "sTitle": "Utillisateurs" },
{ "sTitle": "Derniere modification" }, {
{ "sTitle": "Details", "sClass": "center" } "sTitle": "Derniere modification",
"fnRender" : function(obj) {
return obj.aData[3] + " " + obj.aData[4];
}
},
{
"sTitle": "Details",
"sClass": "center",
"sWidth" : "15px",
"bSortable" : false,
"fnRender" : function(obj) {
return ">";
}
}
], ],
"bAutoWidth" : false, "bAutoWidth" : false,
"bLengthChange": false, "bLengthChange": false,
"bInfo": false "bInfo": false,
"bPaginate": false
});
$('#maps_filter').appendTo("#toolbar");
}); });
});
</script> </script>
<!--Tags--> <!--Tags-->
@ -77,11 +88,28 @@
}); });
}); });
</script> </script>
<!--Toolbar-->
<script type="text/javascript" charset="utf-8">
$(function() {
$("#show-tags").click(function() {
})
});
</script>
</head> </head>
<body> <body>
<div id="wrapper"> <div id="wrapper">
<!--<div id="toolbar" class="toolbar"></div>--> <div id="toolbar" class="toolbar">
</div>
<div id="map-table-actions">
<button>Organiser</button>
<button>Partager</button>
<button>Supprimer</button>
</div>
<div> <div>
<div id="tags"> <div id="tags">