Buenas noches programadores, saben como puedo unir estos script's?
Buenas noches programadores, saben como puedo unir estos script's?
skinny1991
Posts: 4Questions: 2Answers: 0
<
script>
$(document).ready(function() {
$('#example').DataTable( {
"footerCallback": function ( a, data, start, end, display ) {
var api = this.api(), data;
// Remove the formatting to get integer data for summation
var intVal = function ( i ) {
return typeof i === 'string' ?
i.replace(/[\$,]/g, '')*1 :
typeof i === 'number' ?
i : 0;
};
// Total over all pages
total = api
.column( 1 )
.data()
.reduce( function (a, b) {
return intVal(a) + intVal(b);
}, 0 );
// Total over this page
pageTotal = api
.column( 1, { page: 'current'} )
.data()
.reduce( function (a, b) {
return intVal(a) + intVal(b);
}, 0 );
// Update footer
$( api.column( 1 ).footer() ).html(
'$'+pageTotal
);
// Total over all pages
total = api
.column( 2 )
.data()
.reduce( function (a, b) {
return intVal(a) + intVal(b);
}, 0 );
// Total over this page
pageTotal = api
.column( 2, { page: 'current'} )
.data()
.reduce( function (a, b) {
return intVal(a) + intVal(b);
}, 0 );
// Update footer
$( api.column( 2 ).footer() ).html(
'$'+pageTotal
);
// Total over all pages
total = api
.column( 3 )
.data()
.reduce( function (a, b) {
return intVal(a) + intVal(b);
}, 0 );
// Total over this page
pageTotal = api
.column( 3, { page: 'current'} )
.data()
.reduce( function (a, b) {
return intVal(a) + intVal(b);
}, 0 );
// Update footer
$( api.column( 3 ).footer() ).html(
'$'+pageTotal
);
// Total over all pages
total = api
.column( 4 )
.data()
.reduce( function (a, b) {
return intVal(a) + intVal(b);
}, 0 );
// Total over this page
pageTotal = api
.column( 4, { page: 'current'} )
.data()
.reduce( function (a, b) {
return intVal(a) + intVal(b);
}, 0 );
// Update footer
$( api.column( 4 ).footer() ).html(
'$'+pageTotal +' ( $ '+ total +' total)'
);
}
} );
} );
</script>
<script>
$(document).ready(function() {
table = $('#example').DataTable({"lengthMenu": [[10, 25, 35, 50, 100, 200, -1], [10, 25, 35, 50, 100, 200, "All"]],
buttons: [ 'copy', 'excel','colvis' ]
} );
table.buttons().container().appendTo( '#example_wrapper .col-sm-6:eq(0)' );
$('#example thead th').each( function(){var title = $(this).text();
$(this).html( '<input style="width:88%" type="text" placeholder="Buscar por '+title+'" />' );
} );
// Aplicando busqueda por columna
table.columns().every( function () {
var that = this;
$( 'input', this.header() ).on( 'keyup change', function () {
if ( that.search() !== this.value ) {
that
.search( this.value )
.draw();
}
} );
} );
} );
</script>
Ya que el sistema me marca error al cargar datatable :
DataTables warning: table id=example - Cannot reinitialise DataTable. For more information about this error, please see http://datatables.net/tn/3
This discussion has been closed.
Answers
<!DOCTYPE html>
<html>
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>datos</title>
<link rel="icon" type="image/png" href="img/libro.png">
<
div><border align=right>
<link rel="stylesheet" type="text/css" href="css/jquery.dataTables.min.css">
<link rel="icon" type="image/png" href="img/searc.png">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/dataTables.bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="./css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="./css/buttons.bootstrap.min.css">
$(document).ready(function() { $('#example').DataTable( { "footerCallback": function ( a, data, start, end, display ) { var api = this.api(), data; // Remove the formatting to get integer data for summation var intVal = function ( i ) { return typeof i === 'string' ? i.replace(/[\$,]/g, '')*1 : typeof i === 'number' ? i : 0; }; // Total over all pages total = api .column( 1 ) .data() .reduce( function (a, b) { return intVal(a) + intVal(b); }, 0 ); // Total over this page pageTotal = api .column( 1, { page: 'current'} ) .data() .reduce( function (a, b) { return intVal(a) + intVal(b); }, 0 ); // Update footer $( api.column( 1 ).footer() ).html( '$'+pageTotal ); // Total over all pages total = api .column( 2 ) .data() .reduce( function (a, b) { return intVal(a) + intVal(b); }, 0 ); // Total over this page pageTotal = api .column( 2, { page: 'current'} ) .data() .reduce( function (a, b) { return intVal(a) + intVal(b); }, 0 ); // Update footer $( api.column( 2 ).footer() ).html( '$'+pageTotal ); // Total over all pages total = api .column( 3 ) .data() .reduce( function (a, b) { return intVal(a) + intVal(b); }, 0 ); // Total over this page pageTotal = api .column( 3, { page: 'current'} ) .data() .reduce( function (a, b) { return intVal(a) + intVal(b); }, 0 ); // Update footer $( api.column( 3 ).footer() ).html( '$'+pageTotal ); // Total over all pages total = api .column( 4 ) .data() .reduce( function (a, b) { return intVal(a) + intVal(b); }, 0 ); // Total over this page pageTotal = api .column( 4, { page: 'current'} ) .data() .reduce( function (a, b) { return intVal(a) + intVal(b); }, 0 ); // Update footer $( api.column( 4 ).footer() ).html( '$'+pageTotal +' ( $ '+ total +' total)' ); } } ); } );<link rel="stylesheet" type="text/css" href="css/jquery.dataTables.min.css">
<style type="text/css">
th { white-space: nowrap; }
</style>
</head>
<body>
<br />
<br />
</body>
</html>
Hi @skinny1991 ,
The problem is because you're initialising DataTables twice, on line 2 and line 94. You should organise your code so that there's a single
$(document).readyblock, and initialise just the once,Cheers,
Colin