I´m trying to apply some style from MDL to all checkboxes I render in my datatable. I included css and JS by NPM but still not working. I think my problem it´s the order of my scripts and links too css and JS, but i´ve tried several changes and still not working.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Apollo Payments</title>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.css">
<link rel="stylesheet" href="/node_modules/material-design-lite/material.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css">
<script src="/node_modules/material-design-lite/material.min.js"></script>
<!-- <script defer src="https://code.getmdl.io/1.3.0/material.min.js"></script> -->
</head>
<body>
<section clas="table-section">
<div class="mdl-grid container">
<table id="datatable" class="row-border">
<thead>
<tr>
<th>
<input type="checkbox" name="select_all" value="1" id="select-all">
</th>
<th>Fecha envío</th>
<th>Concepto</th>
<th>Tipo de pago</th>
<th>Cuenta origen</th>
<th>Estado</th>
<th>Importe</th>
</tr>
</thead>
</table>
</div>
</section>
</body>
</html>
The my Js code in my app.js is this:
var dt = require( 'datatables.net' );
import scss from './app.scss';
$(document).ready( function () {
var table = $('#datatable').DataTable({
"ajax": {url: "/src/data.json",
dataSrc: ''
},
"rowId": 'rowId',
"paging": false,
"lengthMenu":["All"],
"order":[ 1, 'asc' ],
// "className": 'mdl-data-table__cell--non-numeric',
"columns": [
{ "data": "fav",
"orderable":false,
'render': function (data, type, full, meta){
// return '<input type="checkbox" name="id[]" value="' + $('<div/>').text(data).html() + '">';
return '<label class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect" for="checkbox-'+ meta.row +' "><input type="checkbox" id="checkbox-'+ meta.row +'" class="mdl-checkbox__input"></label>';
} },
{ "data": "fechaEnvio",
"width":"10%"
},
{ "data": "concepto.text",
// "width":"40%",
"className":"concepto",
"render":function(data, type, full, meta){
return "<span class='row'>" + full.concepto.text + "</span><br><span class='subrow'>" + full.concepto.company + "</span>";
}
},
// { "data": "concepto.company" },
{ "data": "pago.tipoPago",
"className":"tipo-pago",
"render":function(data, type, full, meta){
return "<span class='row'>" + full.pago.tipoPago + "</span><br><span class='subrow'>" + full.pago.metodo + "</span>";
}
},
// { "data": "pago.metodo" },
{ "data": "cuentaOrigen.tipo",
"className":"cuenta-origen",
"render":function(data, type, full, meta){
return "<span class='row'>" + full.cuentaOrigen.tipo + "</span><br><span class='subrow'>" + full.cuentaOrigen.cuenta + "</span>";
}
},
// { "data": "cuentaOrigen.cuenta" },
{ "data": "estado.estadoPago",
"className":"'estado-pago",
"render":function(data, type, full, meta){
if (full.estado.estadoFiltro == 'bloqueada') {
return "<span class='row " + full.estado.estadoFiltro + "'>" + full.estado.estadoPago + "</span><br><span class='subrow " + full.estado.estadoFiltro + "'>" + full.estado.accion + "</span>";
}else if(full.estado.estadoFiltro == 'rechazada') {
return "<span class='row " + full.estado.estadoFiltro + "'>" + full.estado.estadoPago + "</span><br><span class='subrow " + full.estado.estadoFiltro + "'>" + full.estado.accion + "</span>";
}else if(full.estado.estadoFiltro == 'preparacion') {
return "<span class='row " + full.estado.estadoFiltro + "'>" + full.estado.estadoPago + "</span><br><span class='subrow " + full.estado.estadoFiltro + "'>" + full.estado.accion + "</span>";
}else{
return "<span class='row'>" + full.estado.estadoPago + "</span><br><span class='subrow'>" + full.estado.accion + "</span>";
}
}
},
// { "data": "estado.accion" },
{ "data": "importe",
"className":"importe",
"render":function(data, type, full, meta){
return "<span class='row'>" + full.importe + full.currency + "</span>";
}
}
// { "data": "currency" }
]
});
$('.card').on('click',function(){
$(this).addClass('selected');
if($(this).hasClass('selected')){
$(".card").removeClass('selected');
$(this).addClass('selected');
}
})
$('#all').on('click', function () {
table.columns().search("",true).draw();
});
$('#preparation>.filter-box').on('click', function () {
table.columns(5).search("pendiente",true).draw();
});
$('#transit>.filter-box').on('click', function () {
table.columns(5).search("tránsito|bloqueada",true).draw();
});
$('#buttonit').on('click', function () {
table.columns(4).search("",true).draw();
});
$('.divisas').on('click',function(){
console.log('Divisas');
});
// Handle click on "Select all" control
$('#select-all').on('click', function(){
// Get all rows with search applied
var rows = table.rows({ 'search': 'applied' }).nodes();
// Check/uncheck checkboxes for all rows in the table
$('input[type="checkbox"]', rows).prop('checked', this.checked);
});
$('#table tbody').on('change', 'input[type="checkbox"]', function(){
// If checkbox is not checked
if(!this.checked){
var el = $('#select-all').get(0);
// If "Select all" control is checked and has 'indeterminate' property
if(el && el.checked && ('indeterminate' in el)){
// Set visual state of "Select all" control
// as 'indeterminate'
el.indeterminate = true;
}
}
});
} );
I´m using webpack.
Thanks for all of you
Aucun commentaire:
Enregistrer un commentaire