Projeto

Refresh na tabela

by André Albson

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://getbootstrap.com/dist/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://github.com/wenzhixin/bootstrap-table/blob/5435887b7494a6bf146f01b932474c0280e79142/dist/bootstrap-table.css">
<script src="https://github.com/wenzhixin/bootstrap-table/blob/5435887b7494a6bf146f01b932474c0280e79142/dist/bootstrap-table.js"></script>
<script src="https://github.com/wenzhixin/bootstrap-table/blob/5435887b7494a6bf146f01b932474c0280e79142/dist/bootstrap-table-locale-all.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>


<div class="page-header">
  

  <button class="btn btn-primary pull-right btn-import-user btn-sm" data-toggle="modal" data-target="#cadastroCargo">Novo Cadastro</button>

  <!-- Modal -->
  <div class="modal fade" id="cadastroCargo" tabindex="-1" data-keyboard="false" data-backdrop="static" role="dialog" aria-labelledby="cargoLabel">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <form id="cargo" action="Cargo/inserir" method="POST" enctype="multipart/form-data" autocomplete="off">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            <h4 class="modal-title" id="cargoLabel">Cadastrar Cargo</h4>
          </div>
          <div class="modal-body">
            <fieldset>
              <div class="form-group">
                <label...

CSS

/* 
    Created on : 19/11/2015, 09:47:29
    Author     : albson.xavier
*/

body{
    background-color: #e9ecf3;
    font-family: Tahoma;
    text-decoration: none !important;
}

.page-header{
    font-size: 16px;
    color: #697882;
    padding-left: 20px;
    padding-bottom: 10px;
    font-family: Tahoma;
}

.breadcrumb{
    background-color: #e9ecf3;
    margin-top: -30px;
    padding-left: 20px;
    font-size: 12px;
    padding-bottom: 20px;
    font-family: Tahoma;
}

.breadcrumb>li:hover {
    background-color: transparent !important;
    padding-bottom: 0px;
}

.breadcrumb>li>a:hover {
    background-color: transparent !important;
}

/* separador breadcrumb */
.breadcrumb>li+li:before {
    padding: 0 5px;
    color: #ccc;
    content: "●\00a0";
}

.breadcrumb>.active {
    color: #c5ccd5;
}


table, .table-responsive, .bootstrap-table{
    font-size: 12px;
    width: 100%;
    background-color: #ffffff;
    padding: 5px;
    -webkit-box-shadow: 0 8px 6px -6px #B6BDCB;
    -moz-box-shadow: 0 8px 6px -6px #B6BDCB;
    box-shadow: 0 7px 6px -6px #B6BDCB;
}

.bootstrap-table{
    /* height: min-content; */
    margin-bottom: 20px;
}

.bootstrap-table{
    margin-top: -30px;
    position: relative;
    padding-bottom: 20px !important;
}


.btn-fechar-modal{
    border-color: #000000 !important;
    border-radius: 0px;
    font-family: Tahoma;
    margin-bottom: 15px;
    margin-right: 10px;
}

.modal-content{
    border-radius: 0px !important;
}

.modal-title{
    font-family: Tahoma !important;
    font-weight: normal !important;
    text-align: left;
    font-size: 16px;
}

.body-modal-ajuda{
    height: 300px !important;
}

.tempo-empresa{
    position: relative;
    margin-top: -20px !important;
    margin-bottom: -25px;
}

.table-modal{
    position: absolute;
    left: -110px !important;   
}

.modal-body{
    background-color: #fcfcfc;
}

.title-white{
    color: #ffffff;
}

.icon-excel{
    padding-right: 5px;
    margin-left: -5px;
}

JavaScript

$(document).ready(function() {
		
	$("#cargo").formValidation({
            framework: 'bootstrap',
	    excluded: ':disabled',
	    icon: {
	     valid: 'fa fa-check',
             invalid: 'fa fa-times',
             validating: 'fa fa-refresh'
	    },
	    clazz: {
	          valid: 'field-success',
	          invalid: 'help-block'
	    },
		fields: {
			titulo: {
                validators: {
                    notEmpty: {
                        message: 'Campo obrigatório! Informe um Cargo.'
                    },
                    stringLength: {
                        min: 5,
                        message: 'O título deve ser superior a 5 caracteres'
                    }
                }
            }
		}
    })
	.on('success.form.fv', function (e) {
        // Impede o envio do formulario
        e.preventDefault();

        var $form = $(e.target),
            fv = $form.data('formValidation');

        // Usa Ajax para enviar o formulario
        $.post($form.attr('action'), $form.serialize(), function (result) {
            if (result.status == "true") {
                $(location).attr('href', result.acao.url);
            } else {
                $('#cargo').formValidation('resetForm', true);
                $('#cadastroCargo').modal('hide');
                $('#sucesso').modal('show');
		            $('#cargo').bootstrapTable('refresh');
            }
        }, 'json');
    });         
});