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] }); } } //console.log(aoData); 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(); console.log(e) 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] }); } } //console.log(aoData); 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(); console.log(e) 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] }); } } //console.log(aoData); 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(); console.log(e) 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 ""; } }; ;