var paramsSearch = new Array();
var valuesSearch = new Array();
// DataTable - Responsável pela paginação do conteúdo em tabela
// Função inicializa com paginação no servidor
function Table(Tabela, sAjaxSource, aoColumns) {
/* iDisplayLength = "Quantidade de registros que você deseja receber em cada request no banco".
bServerSide = "Ativa/Desativa a paginação em servidor".
sAjaxSource = "Local onde se encontra a função que retorna os registros, no caso a função do controller".
fnServerData = "É responsável pela a chamada da action controller que foi setado no sAjaxSource,
também passando os parametros necessarios"
bProcessing = "Ativa/Desativa mensagem de processando no momento em que está carregando os dados".
columnDefs = "Definição das colunas, como por exemplo o item 'bSortable' que define se a
coluna pode ser classificada e tambem o item 'bSearchable' que define
se a coluna pode ser pesquisada".
aoColumns = "Especifica a coluna que recebera o registro retornado, por exemplo usando o item 'sName'
é o nome que esta na tag '
' no cabeçalho da tabela já o mData é o nome da propriedade
que foi retornada no qual será exibida nessa coluna. Exemplo:
-Quando converto um objeto em JSON ele me retorna uma string similar a esta:
{nome:'Wesley', sexo:'Masculino', idade:'19'}
Quero que todos os registros que foi retornado em uma tabela, ficando dessa forma:
aoColumns: [
{
"sName" : "Nome", // Nome da coluna da tabela
"mData" : "nome" // Propriedade retornada pelo JSON
},
{
"sName" : "Sexo", // Nome da coluna da tabela
"mData" : "sexo" // Propriedade retornada pelo JSON
},
{
"sName" : "Idade", // Nome da coluna da tabela
"mData" : "idade" // Propriedade retornada pelo JSON
}
];
Posso definir funções especificas para determinadas colunas, um bom exemplo
e se com a idade retornada pelo JSON eu quisesse exibir o ano de nascimento
da pessoa, para fazer isso utilizo o item "mRender", ficando dessa forma:
aoColumns: [
{
"sName" : "Nome", // Nome da coluna da tabela
"mData" : "nome" // Propriedade retornada pelo JSON
},
{
"sName" : "Sexo", // Nome da coluna da tabela
"mData" : "sexo" // Propriedade retornada pelo JSON
},
{
"sName" : "Idade", // Nome da coluna da tabela, no caso neste exemplo esse nome deveria ser trocado tanto aqui quanto na tag | na tabela
"mData" : "idade" // Propriedade retornada pelo JSON
"mRender": function(idade) {
return 2015 - idade; // Fazendo dessa forma ele retorna o ano de nascimento da pessoa
}
}
];
oLanguage = "Por default, o DataTable vem configurado para a língua inglesa, nessa propriedade você pode atribuir a tradução de determinadas palavras. Ex:
"sLoadingRecords": "Carregando..."
"sProcessing": "Processando..."
bDeferRender = "Para uma renderização mais perfomatica"
bDestroy = ""
*/
let tabelaRetorno;
$.extend($.fn.dataTableExt.oStdClasses, {
"sFilterInput": "form-control input-sm text-box single-line",
"sWrapper": "dataTables_wrapper form-inline"
});
tabelaRetorno = Tabela.dataTable({
"oLanguage": oLanguageComum,
"bServerSide": true,
"caseInsensitive": false,
"sAjaxSource": sAjaxSource,
"fnServerData": function (sSource, aoData, fnCallback) {
if ($(".input-validation-error:visible").length > 0) {
return;
}
aoData.push({ "name": "TotalRecords", "value": this.fnSettings().fnRecordsTotal() });
aoData.push({ "name": "TotalDisplayRecords", "value": this.fnSettings().fnRecordsDisplay() });
$.ajax({
"dataType": 'json',
"type": "POST",
"url": sSource,
"data": aoData,
"success": fnCallback
});
},
"sDom": "<'row-fluid'<'span6'l><'span6'f>r>t<'row-fluid'<'span6'i><'span6'p>>",
"bDeferRender": false,
"bDestroy": false,
"aoColumns": aoColumns,
"aLengthMenu": [
[20, 40, 60, 80, 100],
[20, 40, 60, 80, 100]
]
}).fnSetFilteringDelay(300);
return tabelaRetorno;
};
function TableFilter(Tabela, sAjaxSource, aoColumns, sFilter, aLengthMenu) {
let tabelaRetorno;
if (sFilter == undefined) {
sFilter = false;
}
$.extend($.fn.dataTableExt.oStdClasses, {
"sFilterInput": "form-control input-sm text-box single-line",
"sWrapper": "dataTables_wrapper form-inline"
});
Tabela.dataTable({
"searching": sFilter,
"oLanguage": oLanguageServidor,
"bServerSide": true,
"caseInsensitive": false,
"sAjaxSource": sAjaxSource,
"fnServerData": function (sSource, aoData, fnCallback) {
if ($(".input-validation-error:visible").length > 0) {
return;
}
$(".loader_mask").show();
$.each(aoData, function (i, a) {
if (a.name == "iDisplayLength") {
a.value = parseInt($("select[aria-controls='" + Tabela[0].id + "']").val());
var settings = Tabela.fnSettings();
settings._iDisplayLength = a.value;
Tabela._fnLengthOverflow(settings);
return false;
}
});
if (paramsSearch.length == 0) {
var refSearch;
if ($(".inputSearchModal").length > 0) {
refSearch = $(".inputSearchModal");
} else {
refSearch = $(".inputSearch");
}
var i = 0;
refSearch.each(function () {
if (($(this).val() != "" && !$(this).is("select")) || ($(this).is("select") && $(this).children("option:selected").val() != "")) {
aoData.push({ "name": "ParamsSearch_" + i, "value": $(this).attr('name') });
if ($(this).attr('type') == 'checkbox') {
aoData.push({ "name": "ValuesSearch_" + i, "value": $(this).is(":checked") });
} else if ($(this).is("select")) {
aoData.push({ "name": "ValuesSearch_" + i, "value": $("option:selected", $(this)).val() });
} else {
aoData.push({ "name": "ValuesSearch_" + i, "value": $(this).val() });
}
}
i++;
});
} else {
for (var i = 0; i < paramsSearch.length; i++) {
aoData.push({ "name": "ParamsSearch_" + i, "value": paramsSearch[i] });
aoData.push({ "name": "ValuesSearch_" + i, "value": valuesSearch[i] });
}
}
aoData.push({ "name": "_iRecordsTotal", "value": Tabela.fnSettings()._iRecordsTotal });
aoData.push({ "name": "_iRecordsDisplay", "value": Tabela.fnSettings()._iRecordsDisplay });
$.ajax({
"dataType": 'json',
"type": "POST",
"url": sSource,
"data": aoData,
"success": function (e) {
$(".loader_mask").hide();
fnCallback(e)
if (e.iTotalRecords <= 0) {
//$(tabelaRetorno).find(' tbody > tr> td').addClass('tabLine');
$(Tabela.selector + ' tbody > tr> td').addClass('tabLine');
}
}
});
},
"sDom": "<'row-fluid'<'span6'l><'span6'f>r>t<'row-fluid'<'span6'i><'span6'p>>",
"bDeferRender": false,
"bDestroy": false,
"aoColumns": aoColumns,
"deferLoading": 0,
"aLengthMenu": aLengthMenu || [
[20, 40, 60, 80, 100],
[20, 40, 60, 80, 100]
]
});
if ($(Tabela).prop("id") != undefined && $(Tabela).prop("id") != null) {
$("select[aria-controls='" + $(Tabela).prop("id") + "']").off("change").on("change", function (event) {
if ($.isEmpty(Tabela.fnGetData()) || Tabela.fnGetData().length <= 0) {
event.preventDefault();
event.stopPropagation();
} else {
Tabela.api().ajax.reload();
}
});
}
$.extend($.fn.dataTableExt.oStdClasses, {
"sFilterInput": "form-control input-sm text-box single-line",
"sWrapper": "dataTables_wrapper form-inline"
});
return Tabela;
}
function TableFilterPessoa(Tabela, sAjaxSource, aoColumns, sFilter) {
let tabelaRetorno;
if (sFilter == undefined) {
sFilter = false;
}
$.extend($.fn.dataTableExt.oStdClasses, {
"sFilterInput": "form-control input-sm text-box single-line",
"sWrapper": "dataTables_wrapper form-inline"
});
Tabela.dataTable({
"searching": sFilter,
"oLanguage": oLanguageServidor,
"bServerSide": true,
"caseInsensitive": false,
"sAjaxSource": sAjaxSource,
"fnServerData": function (sSource, aoData, fnCallback) {
if ($(".input-validation-error:visible").length > 0) {
return;
}
$(".loader_mask").show();
$.each(aoData, function (i, a) {
if (a.name == "iDisplayLength") {
a.value = parseInt($("select[aria-controls='" + Tabela[0].id + "']").val());
var settings = Tabela.fnSettings();
settings._iDisplayLength = a.value;
Tabela._fnLengthOverflow(settings);
return false;
}
});
if (paramsSearch.length == 0) {
var refSearch;
if ($(".inputSearchModal").length > 0) {
refSearch = $(".inputSearchModal");
} else {
refSearch = $(".inputSearch");
}
var i = 0;
refSearch.each(function () {
if (($(this).val() != "" && !$(this).is("select")) || ($(this).is("select") && $(this).children("option:selected").val() != "")) {
aoData.push({ "name": "ParamsSearch_" + i, "value": $(this).attr('name') });
if ($(this).attr('type') == 'checkbox') {
aoData.push({ "name": "ValuesSearch_" + i, "value": $(this).is(":checked") });
} else if ($(this).is("select")) {
aoData.push({ "name": "ValuesSearch_" + i, "value": $("option:selected", $(this)).val() });
} else {
aoData.push({ "name": "ValuesSearch_" + i, "value": $(this).val() });
}
}
i++;
});
} else {
for (var i = 0; i < paramsSearch.length; i++) {
aoData.push({ "name": "ParamsSearch_" + i, "value": paramsSearch[i] });
aoData.push({ "name": "ValuesSearch_" + i, "value": valuesSearch[i] });
}
}
aoData.push({ "name": "_iRecordsTotal", "value": Tabela.fnSettings()._iRecordsTotal });
aoData.push({ "name": "_iRecordsDisplay", "value": Tabela.fnSettings()._iRecordsDisplay });
$.ajax({
"dataType": 'json',
"type": "POST",
"url": sSource,
"data": aoData,
"success": function (e) {
$(".loader_mask").hide();
fnCallback(e)
if (e.iTotalRecords <= 0) {
//$(tabelaRetorno).find(' tbody > tr> td').addClass('tabLine');
$(Tabela.selector + ' tbody > tr> td').addClass('tabLine');
}
}
});
},
"sDom": "<'row-fluid'<'span6'l><'span6'f>r>t<'row-fluid'<'span6'i><'span6'p>>",
"bDeferRender": false,
"bDestroy": false,
"aoColumns": aoColumns,
"deferLoading": 0,
"aLengthMenu": [
[500, 600, 700, 800, 900],
[500, 600, 700, 800, 900]
]
});
if ($(Tabela).prop("id") != undefined && $(Tabela).prop("id") != null) {
$("select[aria-controls='" + $(Tabela).prop("id") + "']").off("change").on("change", function (event) {
if ($.isEmpty(Tabela.fnGetData()) || Tabela.fnGetData().length <= 0) {
event.preventDefault();
event.stopPropagation();
} else {
Tabela.api().ajax.reload();
}
});
}
$.extend($.fn.dataTableExt.oStdClasses, {
"sFilterInput": "form-control input-sm text-box single-line",
"sWrapper": "dataTables_wrapper form-inline"
});
return Tabela;
}
function TableFilterPesagem(Tabela, sAjaxSource, aoColumns, sFilter) {
let tabelaRetorno;
if (sFilter == undefined) {
sFilter = false;
}
$.extend($.fn.dataTableExt.oStdClasses, {
"sFilterInput": "form-control input-sm text-box single-line",
"sWrapper": "dataTables_wrapper form-inline"
});
Tabela.dataTable({
"searching": sFilter,
"oLanguage": oLanguageServidor,
"bServerSide": true,
"caseInsensitive": false,
"sAjaxSource": sAjaxSource,
"fnServerData": function (sSource, aoData, fnCallback) {
if ($(".input-validation-error:visible").length > 0) {
return;
}
$(".loader_mask").show();
$.each(aoData, function (i, a) {
if (a.name == "iDisplayLength") {
a.value = parseInt($("select[aria-controls='" + Tabela[0].id + "']").val());
var settings = Tabela.fnSettings();
settings._iDisplayLength = a.value;
Tabela._fnLengthOverflow(settings);
return false;
}
});
if (paramsSearch.length == 0) {
var refSearch;
if ($(".inputSearchModal").length > 0) {
refSearch = $(".inputSearchModal");
} else {
refSearch = $(".inputSearch");
}
var i = 0;
refSearch.each(function () {
if (($(this).val() != "" && !$(this).is("select")) || ($(this).is("select") && $(this).children("option:selected").val() != "")) {
aoData.push({ "name": "ParamsSearch_" + i, "value": $(this).attr('name') });
if ($(this).attr('type') == 'checkbox') {
aoData.push({ "name": "ValuesSearch_" + i, "value": $(this).is(":checked") });
} else if ($(this).is("select")) {
aoData.push({ "name": "ValuesSearch_" + i, "value": $("option:selected", $(this)).val() });
} else {
aoData.push({ "name": "ValuesSearch_" + i, "value": $(this).val() });
}
}
i++;
});
} else {
for (var i = 0; i < paramsSearch.length; i++) {
aoData.push({ "name": "ParamsSearch_" + i, "value": paramsSearch[i] });
aoData.push({ "name": "ValuesSearch_" + i, "value": valuesSearch[i] });
}
}
aoData.push({ "name": "_iRecordsTotal", "value": Tabela.fnSettings()._iRecordsTotal });
aoData.push({ "name": "_iRecordsDisplay", "value": Tabela.fnSettings()._iRecordsDisplay });
$.ajax({
"dataType": 'json',
"type": "POST",
"url": sSource,
"data": aoData,
"success": function (e) {
$(".loader_mask").hide();
fnCallback(e)
if (e.iTotalRecords <= 0) {
//$(tabelaRetorno).find(' tbody > tr> td').addClass('tabLine');
$(Tabela.selector + ' tbody > tr> td').addClass('tabLine');
}
}
});
},
"sDom": "<'row-fluid'<'span6'l><'span6'f>r>t<'row-fluid'<'span6'i><'span6'p>>",
"bDeferRender": false,
"bDestroy": false,
"aoColumns": aoColumns,
"deferLoading": 0,
"aLengthMenu": [
[100, 200, 300, 400, 500],
[100, 200, 300, 400, 500]
]
});
if ($(Tabela).prop("id") != undefined && $(Tabela).prop("id") != null) {
$("select[aria-controls='" + $(Tabela).prop("id") + "']").off("change").on("change", function (event) {
if ($.isEmpty(Tabela.fnGetData()) || Tabela.fnGetData().length <= 0) {
event.preventDefault();
event.stopPropagation();
} else {
Tabela.api().ajax.reload();
}
});
}
$.extend($.fn.dataTableExt.oStdClasses, {
"sFilterInput": "form-control input-sm text-box single-line",
"sWrapper": "dataTables_wrapper form-inline"
});
return Tabela;
}
function RenderTable(Tabela, sFilter, aLengthMenu, param) {
$.extend($.fn.dataTableExt.oStdClasses, {
"sFilterInput": "form-control input-sm text-box single-line personalize",
"sLengthSelect": "form-control input-sm text-box single-line personalize",
"sWrapper": "dataTables_wrapper form-inline"
});
let paramPadrao = {
"searching": sFilter,
"oLanguage": oLanguageComum,
"caseInsensitive": false,
"bServerSide": false,
"sDom": "<'row-fluid'<'span6'l><'span6'f>r>t<'row-fluid'<'span6'i><'span6'p>>",
"bDeferRender": false,
"bDestroy": false,
"bLengthChange": sFilter,
"order": [],
"aLengthMenu": aLengthMenu || [
[20, 40, 60, 80, 100, -1],
[20, 40, 60, 80, 100, "Todos"]
]
}
if (!$.isEmpty(param)) {
paramPadrao = $.extend({}, paramPadrao, param);
}
Tabela.dataTable(paramPadrao);
return Tabela;
};
function RenderTableData(Tabela, sFilter, aoColumns, data, aLengthMenu) {
$.extend($.fn.dataTableExt.oStdClasses, {
"sFilterInput": "form-control input-sm text-box single-line personalize",
"sLengthSelect": "form-control input-sm text-box single-line personalize",
"sWrapper": "dataTables_wrapper form-inline"
});
Tabela.dataTable({
"searching": sFilter,
"oLanguage": oLanguageComum,
"caseInsensitive": false,
"bServerSide": false,
"sDom": "<'row-fluid'<'span6'l><'span6'f>r>t<'row-fluid'<'span6'i><'span6'p>>",
"bDeferRender": false,
"bDestroy": false,
"bLengthChange": aoColumns,
"aoColumns": aoColumnsAnimais,
"aaData": data,
"aLengthMenu": aLengthMenu || [
[20, 40, 60, 80, 100, -1],
[ 20, 40, 60, 80, 100, "Todos"]
]
});
return Tabela;
}
// Tradução dos itens do DataTable
var oLanguage = {
"sEmptyTable": "Nenhum resultado encontrado.",
"sLengthMenu": "Exibir _MENU_ registros",
"sInfo": "Exibindo do _START_° ao _END_° registro, de um total de _TOTAL_ registros.",
"sInfoEmpty": "",
"sSearch": "",
"sSearchPlaceholder": "Pesquisar",
"sInfoFiltered": "",
"sLoadingRecords": "Carregando...",
"sProcessing": "Processando...",
"sZeroRecords": "Nenhum registro encontrado",
"oPaginate": {
"sNext": "Próximo",
"sPrevious": "Anterior",
"sFirst": "Primeiro",
"sLast": "Último"
},
"oAria": {
"sSortAscending": ": Ordenar colunas de forma ascendente",
"sSortDescending": ": Ordenar colunas de forma descendente"
}
};
var oLanguageComum = {
"sEmptyTable": "Nenhum resultado encontrado.",
"sZeroRecords": "Nenhum registro encontrado",
}
var oLanguageServidor = {
"sEmptyTable": "Por favor, preencha os filtros para realizar a pesquisa.",
"sZeroRecords": "Para o filtro selecionado, não foi encontrado nenhum registro.",
}
oLanguageComum = $.extend({}, oLanguage, oLanguageComum);
oLanguageServidor = $.extend({}, oLanguage, oLanguageServidor);
// Checagem dos itens
function ToChecked(item) {
if (item == true) {
return 'checked="checked"';
} else {
return "";
}
};
;
|