Eduardo Pliego Meré
Reputation: 55
JQuery DataTable does not take the styles
I'm working with AdminBSB - Material Design, when call ajax in the data table to show information with specific style, the data table does not take the styles. When i work with the data table without ajax, it takes the styles fine, but when i use ajax no takes style the input field and select. Why do not the styles take the input and select field? Here's my code: JQuery:
//INICIO Data Table Gestión de Solicitudes
$('#search_button').click(function(){
//console.log("hola");
var find = $('#find').val();
var new_find = find.split(' / '); //Consultado (12-2017) en: https://stackoverflow.com/questions/16711504/how-to-split-the-string-using-jquery-or-javascript
//console.log(new_find[0]+" ID: "+new_find[1]);
if(find === ''){
showNotification('bg-red', 'Debe escribir el nombre o correo del cliente a buscar', 'top', 'center', '', '');
$('input[id=find]').focus();
}else{
data_table.destroy(); //Consultado (12-2017) en: https://datatables.net/manual/tech-notes/3
data_table = $('.js-exportable').DataTable({ //Consultado (12-2017) en: https://datatables.net/examples/server_side/post.html
ajax: { //Consultado (12-2017) en: https://datatables.net/reference/option/ajax.dataSrc
url: '/minerva/get_request',
cache: false,
type: 'POST',
data: {user_id: new_find[1]},
dataSrc: function (json) { //Consultado (12-2017) en: https://medium.com/code-kings/datatables-js-how-to-modify-your-returned-ajax-json-data-before-sending-it-to-your-html-table-24a92244bc40
//console.log(json.data.documents);
var return_data = new Array();
//for(var i=0;i< json.length; i++){
for(dat in json.data.documents){
//console.log(json.data.documents[dat].document_class);
return_data.push({
//'title': json[i].title,
//'url' : '<img src="' + json[i].url + '">',
//'date' : json[i].date
//'request_id': json.data.request_id,
'document_class': json.data.documents[dat].document_class,
'doc_max_pages': json.data.documents[dat].doc_max_pages,
'doc_type': json.data.documents[dat].doc_type,
'use_type': json.data.documents[dat].use_type,
'is_possess': json.data.documents[dat].is_possess,
})
}
//console.log(return_data);
return return_data;
}
},
searching : true,
columns: [
//{ data: 'id' },
{ data: 'doc_max_pages' },
{ data: 'document_class' },
{ data: 'use_type' },
//{ data: 'doc_type' },
//{ data: 'is_possess' },
//{ data: 'use_type' },
//{ data: 'is_possess' }
],
columnDefs: [//Consultado (12-2017) en: https://datatables.net/examples/ajax/null_data_source.html y https://datatables.net/reference/option/columnDefs
{
targets: [ 3 ],
data: null,
defaultContent: '<div class="col-md-12">' +
'<label class="fileContainer btn btn-primary m-t-1 waves-effect">' +
'<p style="color: white";><i class="material-icons">file_upload</i></p>' +
'<input type="file" class="fileToUpload" id="fileToUpload" name="fileToUpload">' +
'</label>' +
' pdf, jpg, png, jpeg o gif' +
'</div>' +
'<div class="col-lg-12 col-md-12 col-sm-12 col-xs-24">' +
'<div class="form-group form-float">' +
'<div class="form-line">' +
'<input type="text" id="file_name" name="file_name" class="form-control" readonly>' +
'<label class="form-label">Nombre del archivo</label>' +
'</div>' +
'</div>' +
'</div>' +
'<br/><br/><br/>' +
'<div class="col-md-12">' +
'<select class="form-control show-tick" id="reception" name="reception" data-live-search="true" required>' +
'<option value="">-- Medio Recepción --</option>' +
'<option value="Medio 1">Medio 1</option>' +
'<option value="Medio 2">Medio 2</option>' +
'<option value="Medio 3">Medio 3</option>' +
'</select>' +
'</div>' +
'<br/><br/><br/>' +
'<div class="col-md-12">' +
'<select class="form-control show-tick" id="file_type" name="file_type" data-live-search="true" required>' +
'<option value="">-- Tipo de Archivo --</option>' +
'<option value="pdf">pdf</option>' +
'<option value="jpg">jpg</option>' +
'<option value="png">png</option>' +
'<option value="jpeg">jpeg</option>' +
'<option value="gif">gif</option>' +
'</select>' +
'</div>'
},
{
targets: [ 4 ],
data: null,
defaultContent: '<button type="button" class="btn btn-primary m-t-1 waves-effect" title="Añadir Página del Documento"><i class="material-icons">add_circle</i></button> 0/1'
},
{
targets: [ 5 ],
data: null,
defaultContent: '<button type="button" class="btn btn-primary m-t-1 waves-effect" data-toggle="modal" data-target="#largeModal_np" title="No Posee"><i class="material-icons">remove_circle</i></button>'
},
{
targets: [ 6 ],
data: null,
defaultContent: '<button type="button" class="btn btn-primary m-t-1 waves-effect" data-toggle="modal" data-target="#largeModal_bs" title="Borrar Solicitud"><i class="material-icons">delete_forever</i></button>'
}
],
language: {
url: '/assets/kavak/minerva/complaints/js/plugins/jquery-datatable/extensions/Spanish.json',
buttons: { //Consultado (01-2016) en: https://datatables.net/extensions/buttons/examples/flash/copyi18n.html
copyTitle: 'Copiado en el portapapeles',
copySuccess: { //Consultado (01-2016) en: https://datatables.net/reference/button/copyHtml5
1: "Copiada una fila al portapapeles",
_: "Copiadas %d filas al portapapeles"
}
}
},
dom: 'Bfrtip',
buttons: [
{
extend: 'copy',
text: 'Copiar',
exportOptions: {
modifier: {
page: 'all'
}
}
},
{
extend: 'csv',
text: 'CSV',
//title: $("#title").val(),
exportOptions: {
modifier: {
search: 'none'
}
}
},
{
extend: 'excel',
text: 'Excel',
//title: $("#title").val(),
exportOptions: {
modifier: {
page: 'all'
}
}
},
{
extend: 'pdf',
text: 'PDF',
//title: $("#title").val(),
pageSize: 'LETTER',
exportOptions: {
modifier: {
page: 'all'
}
}
},
{
extend: 'print',
text: 'Imprimir',
//title: $("#title").val(),
pageSize: 'LETTER'
}
],
pageLength: 5, //Consultado (12-2017) en: https://datatables.net/reference/option/pageLength
responsive: true
});
}
});
var data_table = $('.js-exportable').DataTable({
/*columnDefs: [ //Consultado (12-2017) en: https://datatables.net/examples/basic_init/hidden_columns.html
{
targets: [ 0 ],
visible: false
}
],*/
searching : true,
language: {
url: '/assets/kavak/minerva/complaints/js/plugins/jquery-datatable/extensions/Spanish.json',
buttons: { //Consultado (01-2016) en: https://datatables.net/extensions/buttons/examples/flash/copyi18n.html
copyTitle: 'Copiado en el portapapeles',
copySuccess: { //Consultado (01-2016) en: https://datatables.net/reference/button/copyHtml5
1: "Copiada una fila al portapapeles",
_: "Copiadas %d filas al portapapeles"
}
}
},
dom: 'Bfrtip',
buttons: [
{
extend: 'copy',
text: 'Copiar',
exportOptions: {
modifier: {
page: 'all'
}
}
},
{
extend: 'csv',
text: 'CSV',
//title: $("#title").val(),
exportOptions: {
modifier: {
search: 'none'
}
}
},
{
extend: 'excel',
text: 'Excel',
//title: $("#title").val(),
exportOptions: {
modifier: {
page: 'all'
}
}
},
{
extend: 'pdf',
text: 'PDF',
//title: $("#title").val(),
pageSize: 'LETTER',
exportOptions: {
modifier: {
page: 'all'
}
}
},
{
extend: 'print',
text: 'Imprimir',
//title: $("#title").val(),
pageSize: 'LETTER'
}
],
pageLength: 5,
responsive: true
});
//FIN Data Table Gestión de Solicitudes
HTML:
<!-- Exportable Table -->
<div class="row clearfix">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<div class="card">
<div class="header">
<h2>
TABLA GESTIÓN DE SOLICITUDES
</h2>
<ul class="header-dropdown m-r--5">
<li class="dropdown">
<a href="javascript:void(0);" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
<i class="material-icons">more_vert</i>
</a>
<ul class="dropdown-menu pull-right">
<li><a href="javascript:void(0);">Acción</a></li>
<li><a href="javascript:void(0);">Otra acción</a></li>
<li><a href="javascript:void(0);">Algo más aquí</a></li>
</ul>
</li>
</ul>
</div>
<div class="body">
<div class="table-responsive">
<table class="table table-bordered table-striped table-hover dataTable js-exportable">
<thead>
<tr>
<!-- <th>id</th> -->
<th>Estatus</th>
<th>Tipo de Documento</th>
<th>Fecha Tope</th>
<th>Carga Documento / Medio de Recepción</th>
<th>Añadir Pág. Documento</th>
<th>No Posee</th>
<th>Borrar Solicitud</th>
</tr>
</thead>
<tfoot>
<tr>
<!-- <th>id</th> -->
<th>Estatus</th>
<th>Tipo de Documento</th>
<th>Fecha Tope</th>
<th>Carga Documento / Medio de Recepción</th>
<th>Añadir Pág. Documento</th>
<th>No Posee</th>
<th>Borrar Solicitud</th>
</tr>
</tfoot>
</table>
</div>
</div>
</div>
</div>
</div>
<!-- #END# Exportable Table -->
Upvotes: 2
Views: 708
Answers (1)
Eduardo Pliego Meré
Reputation: 55
The solution was very simple. After AJAX is done, you need to reload the plugin, see AJax does not work with bootstrap-select
$('#reception').selectpicker('refresh'); and $('#file_type').selectpicker('refresh');
After columnDefs[], add this: initComplete: function(settings, json){ $('.reception').selectpicker('refresh'); $('.file_type').selectpicker('refresh'); },
The initComplete, can see here Initialisation complete callback
Upvotes: 1
Related Questions
- Cannot read property 'style' of undefined on using jquery datatable
- Add style cell to DataTable from database
- CSS - Datatable is not styled correctly
- DataTable does not apply style when called from ajax
- Datatable styling not working
- How to add css styles to table with ajax loaded data
- DataTables draw() method is not working
- jQuery Datatables not working properly
- jQuery DataTable fnDestroy reformats table
- CSS in jQuery DataTable