DataTables moment spanish
HTML
<!DOCTYPE html>
<html>
<head>
<!-- DataTables CSS -->
<link rel="stylesheet" type="text/css" href="http://cdn.datatables.net/1.10.4/css/jquery.dataTables.css">
<!-- jQuery -->
<script type="text/javascript" charset="utf8" src="http://code.jquery.com/jquery-2.1.3.min.js"></script>
<!-- DataTables -->
<script type="text/javascript" charset="utf8" src="http://cdn.datatables.net/1.10.4/js/jquery.dataTables.js"></script>
<!-- TableTools -->
<script type="text/javascript" charset="utf8" src="https://datatables.net/release-datatables/extensions/TableTools/js/dataTables.tableTools.js"></script>
<link rel ="stylesheet" type="text/css" href="http://www.datatables.net/release-datatables/extensions/TableTools/css/dataTables.tableTools.css">
<!-- Ultimate data/time 1 -->
<script type="text/javascript" charset="utf8" src="http://cdnjs.cloudflare.com/ajax/libs/moment.js/2.8.4/moment.min.js"></script>
<!-- Ultimate data/time 2 -->
<script type="text/javascript" charset="utf8" src="http://cdn.datatables.net/plug-ins/3cfcc339e89/sorting/datetime-moment.js"></script>
<!-- Bootstrap CSS -->
<link rel="stylesheet" type="text/css" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />
<!-- Bootstrap JS -->
<script type="text/javascript" src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<script type="text/javascript" src="index.js"></script>
<link rel ="stylesheet" type="text/css" href="stylesheet.css">
<title>Financiación y ayudas para la investigación</title>
</head>
<body>
<div id="wrapper">
<div id ="container">
<button type="button" class="btn btn-default btn-sm" id ="btnToggleFinish" title="Haz clic aquí para ocultar las convocatorias cuyo plazo ya se ha extinguido">
<span class="glyphicon glyphicon-eye-close" aria-hidden="true"></span>
Hide finished
</button>
<table id="table_id"...
CSS
html, body, #wrapper{
/* height: 100%; */
margin:0;
}
body > #wrapper{
height: auto;
min-height: 100%;
}
#header{
position: relative;
padding: 15px 30px 60px;
font-size: 25px;
background: #FFFFFF;
box-shadow: 0 0 30px -4px rgba(0, 0, 0, 0.8);
color: #71ba7b;
}
body{
background-image:url('../images/bg.png');
font-family: 'Segoe UI';
}
#table_id a{
text-decoration: none;
color: #71ba7b;
border: 1px solid #71ba7b;
padding: 5px;
}
#table_id a:hover{
background: #71ba7b;
color: #FFFFFF;
transition: background 1s;
transition: color 0.3s;
}
::selection{
background: #71ba7b;
color: #FFFFFF;
}
::-moz-selection{
background: #71ba7b;
color: #FFFFFF;
}
#container{
max-width: 1200px;
width: 75%;
margin: 0 auto;
}
#table_id_wrapper{
margin-top: 20px;
}
#table_id thead {
background: #a2d8a9;
color: #032408;
}
#table_id{
box-shadow: 0 0 30px -4px rgba(0, 0, 0, 0.8);
}
input,
select{
font-weight: normal;
color: #000000;
}
#table_id_info,
#table_id_length,
#table_id_filter,
.dataTables_paginate
{
text-shadow: 1px 2px #000000;
color: #FFFFFF !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button{
text-shadow: none;
color: #FFFFFF !important;
}
.DTTT_container{
float: left !important;
}
#table_id_length{
margin-left: 400px;
float: right;
position: relative;
margin: 0 auto;
}
#table_id_filter{
margin-right: 10px;
}
#backto{
width: 150px;
margin-top: 15px;
font-size: 14px;
line-height: 1.1538;
margin-bottom: 0.9231em;
font-family: 'Raleway', sans-serif;
border: 1px solid #FFFFFF;
color: #FFFFFF;
padding: 5px 5px 5px 50px;
}
#backto a{
text-decoration: none;
color: #FFFFFF;
}
#backto:hover{
background: #71ba7b;
border: 1px solid #71ba7b;
transition: background 1s;
}
#btnToggleFinish{
margin-top: 10px;
}
JavaScript
$(document).ready( function () {
//Constructor de la tabla
$.fn.dataTable.moment('D[ / ]M[ / ]YYYY');
var table = $('#table_id').DataTable({
"language": {
"url": "http://cdn.datatables.net/plug-ins/3cfcc339e89/i18n/Spanish.json"
},
"order": [[ 1, "desc" ]],
dom: 'TC<"clear">lfrtip',
oTableTools: {
sSwfPath: "http://cdn.datatables.net/tabletools/2.2.3/swf/copy_csv_xls_pdf.swf"
}
});
$('#btnToggleFinish').click(function(){
//Filtro para convocatorias activas/cerradas
//Coger la fecha actual
var d = new Date();
var day = d.getDate();
var month = d.getMonth();
var year = d.getFullYear();
//Meterla en un objeto tipo Date
var actualDateObj = new Date();
actualDateObj.setDate(day);
actualDateObj.setMonth(month);
actualDateObj.setYear(year);
//Leer la columna de Fin de convocatoria
var idx = table.column(2).data();
//Obtener el número total de columnas, para el loop
var rowCount = table.data().length;
// Comparar datos
for (var i = 0; rowCount > i; i++)
{
//Convertir los datos de la columna en un date object
var myDay = idx[i].substring(0,2);
var myMonth = idx[i].substring (5,7);
var myYear = idx[i].substring (10,14);
var tableDateObj = new Date();
tableDateObj.setDate(myDay);
tableDateObj.setMonth(myMonth-1); // El -1 es porque Enero es 0 y empieza ahí.
tableDateObj.setYear(myYear);
//alert(tableDateObj);
if (actualDateObj > tableDateObj) {
//Aquí marcamos las filas para borrar añadiéndoles la clase 'deleteMe'
// alert("Me he cargado la fila número: " + i); //Debug
table.row(i).nodes().to$().addClass('deleteMe');
}
}
//Borramos todas las filas con la clase 'deleteMe' de golpe.
table.rows('.deleteMe').remove().draw();
});
});
// ULTIMATE TIME DATING SORTING https://datatables.net/blog/2014-12-18