How to translate "Rows Selected" into datatables js

Asked

Viewed 654 times

-2

This is the code of my HTML page, it’s 90% translated to table, but when I select an item, it doesn’t translate, and I don’t even know how to translate.

<?php
session_start();
$pagTitle = "Clientes";
require_once ("../tools/conexao.php");
include_once ("../tools/head.php");
$clientes = "active";
$openClient = "open";
?>
<body>
<?php 
include_once ("../tools/header.php");
include_once ("../tools/slidebar.php");
?>
<!--content area start-->
<div id="content" class="pmd-content inner-page">

<!--tab start-->
<div class="container-fluid full-width-container data-tables">
        <!-- Title -->
        <h1 class="section-title" id="services">
            <span></span>
        </h1><!-- End Title -->
<script type="text/javascript">
    document.addEventListener('DOMContentLoaded', function(){ 
    setTimeout(function() {
    $("#hideNotify").fadeOut().empty();
    }, 6000);
    }, false);
</script>


<button type="button" data-positionX="right"data-positionY="top"data-effect="fadeInUp"data-message="Well done! You successfully read this important alert message."data-type="success" class="btn pmd-ripple-effect btn-success pmd-z-depth pmd-alert-toggle">Alert Success</button>
    <?php if(isset($_SESSION['msg'])){echo $_SESSION['msg'];unset($_SESSION['msg']);}?>
        <!--breadcrum start-->
        <ol class="breadcrumb text-left">
          <li><a href="<?php echo $baseUrl;?>app/">Dashboard</a></li>
          <li class="active">Clientes</li>
        </ol><!--breadcrum end-->

            <!-- table card -->
        <!--Primary button with a ripple effect-->
        <a data-target="#addCliente" data-toggle="modal" class="subir btn pmd-ripple-effect btn-primary rounded"> Adicionar <i class="fa sp fa-user-plus"></i></a>
        <section class="row component-section">

        <div class="col-md-12">
                <div class="component-box">
                    <!-- table card example -->
                    <div  class="pmd-card pmd-z-depth pmd-card-custom-view">
                        <div class="table-responsive">
                        <table id="example-checkbox" class="table pmd-table table-hover table-striped display responsive nowrap" cellspacing="0" width="100%">
                        <thead>
                            <tr>
                                <th>#</th>
                                <th>ID</th>
                                <th>Nome</th>
                                <th>CPF</th>
                                <th>Telefone</th>
                                <th>Email</th>                              
                                <th>Estado</th>
                                <th>Cidade</th>
                                <th>Endereço</th>
                                <th>CEP</th>
                                <th>Sexo</th>
                                <th>Status</th>
                            </tr>
                        </thead>
                        <tbody>
                            <?php 
                            /*Pegar dados no bd*/
                            $sql = "SELECT * FROM clientes";
                            $dados = mysqli_query($conn, $sql);
                            $count =  mysqli_num_rows($dados);
                            while($rows = mysqli_fetch_assoc($dados)) {
                        ?> <!-- verificar se esta ativo e dar cor -->
                        <?php 
                            if ($rows['ativo'] == "Desativado") {echo "";}
                        ?>
                            <tr class="noActive">
                                <td></td>
                                <td><?php echo $rows['idCliente']; ?></td>
                                <td><?php echo $rows['nome']; ?></td>
                                <td><?php echo $rows['cpf']; ?></td>
                                <td><?php echo $rows['telefone']; ?></td>
                                <td><?php echo $rows['email']; ?></td>
                                <td><?php echo $rows['estado']; ?></td>
                                <td><?php echo $rows['cidade']; ?></td>
                                <td><?php echo $rows['endereco']; ?></td>
                                <td><?php echo $rows['cep']; ?></td>
                                <td><?php echo $rows['sexo']; ?></td>                               
                                <td><?php echo $rows['ativo']; ?></td>
                            </tr>
                            <!--Fechar laço While -->
                        <?php } ?>  
                        </tbody>
                    </table>
                        </div>
                    </div> <!-- table card example end -->

                </div>
            </div> <!-- table card code and example end -->
            <!-- table card title and description -->
        </section>

    </div>
<!--tab start-->

<!--content area end-->
<div class="col-md-6 col-sm-6"> 
    <div tabindex="-1" class="modal fade" id="addCliente" style="display: none;" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header bordered">
                    <button aria-hidden="true" data-dismiss="modal" class="close" type="button">×</button>
                    <h2 class="pmd-card-title-text">Adicionar Cliente</h2>
                </div>
                <div class="modal-body">
                    <form autocomplete="false" method="post" action="addCliente.php" class="form-horizontal">
                        <div class="form-group pmd-textfield pmd-textfield-floating-label">
                            <label for="first-name">Nome</label>
                            <input type="text" class="mat-input form-control" name="nome" id="nome" value="">
                        </div>
                            <div class="form-group pmd-textfield pmd-textfield-floating-label">
                            <label for="first-name">CPF</label>
                            <input type="text" class="mat-input form-control" name="cpf" id="cpf" value="">
                        </div>
                        <div class="form-group pmd-textfield pmd-textfield-floating-label">
                            <label for="first-name">Telefone</label>
                            <input type="text" class="mat-input form-control" name="telefone" id="telefone" value="">
                        </div>
                        <div class="form-group pmd-textfield pmd-textfield-floating-label">
                            <label for="first-name">Email</label>
                            <input type="text" class="mat-input form-control" name="email" id="email" value="">
                        </div>                      
                        <div class="form-group pmd-textfield pmd-textfield-floating-label">
                            <label for="first-name">Estado</label>
                            <input type="text" class="mat-input form-control" name="estado" id="estado" value="">
                        </div>
                        <div class="form-group pmd-textfield pmd-textfield-floating-label">
                            <label for="first-name">Cidade</label>
                            <input type="text" class="mat-input form-control" name="cidade" id="cidade" value="">
                        </div>
                        <div class="form-group pmd-textfield pmd-textfield-floating-label">
                            <label for="first-name">Endereço</label>
                            <input type="text" class="mat-input form-control" name="endereco" id="endereco" value="">
                        </div>
                        <div class="form-group pmd-textfield pmd-textfield-floating-label">
                            <label for="first-name">CEP</label>
                            <input type="text" class="mat-input form-control" name="cep" id="cep" value="">
                        </div>
                        <div class="form-group pmd-textfield pmd-textfield-floating-label">
                        <div class="form-group pmd-textfield pmd-textfield-floating-label">
                                        <label>Sexo</label>
                                        <select name="sexo" class="select-simple form-control pmd-select2">
                                            <option>Masculino</option>
                                            <option>Feminino</option>
                                            <option>Outro</option>
                                        </select>
                                    </div>
                        </div>
                        <div class="form-group pmd-textfield pmd-textfield-floating-label">
                                        <label>Status</label>
                                        <select name="ativo" class="select-simple form-control pmd-select2">
                                            <option>Ativo</option>
                                            <option>Desativado</option>
                                        </select>
                                    </div>
                        </div>
                        <div class="pmd-modal-action">
                            <button  class="rounded btn pmd-ripple-effect btn-success" type="submit">Cadastrar</button>
                            <button data-dismiss="modal"  class="rounded btn pmd-ripple-effect btn-danger" type="button">Fechar</button>
                        </div>
                    </form>
                </div>

            </div>
        </div>
    </div>
</div>

</div>

<?php include_once("../tools/footer.php"); ?>

<!-- Scripts Starts -->
<script src="<?php echo $baseUrl;?>assets/js/jquery-1.12.2.min.js"></script>
<script src="<?php echo $baseUrl;?>assets/js/bootstrap.min.js"></script>
<script src="<?php echo $baseUrl;?>assets/js/propeller.min.js"></script>
<script>
    $(document).ready(function() {
        var sPath=window.location.pathname;
        var sPage = sPath.substring(sPath.lastIndexOf('/') + 1);
        $(".pmd-sidebar-nav").each(function(){
            $(this).find("a[href='"+sPage+"']").parents(".dropdown").addClass("open");
            $(this).find("a[href='"+sPage+"']").parents(".dropdown").find('.dropdown-menu').css("display", "block");
            $(this).find("a[href='"+sPage+"']").parents(".dropdown").find('a.dropdown-toggle').addClass("active");
            $(this).find("a[href='"+sPage+"']").addClass("active");
        });
        $(".auto-update-year").html(new Date().getFullYear());
    });
</script> 

<!-- Scripts Ends -->


<!-- Datatable js -->
<script type="text/javascript" language="javascript" src="<?php echo $baseUrl;?>assets/js/jquery.dataTables.min.js"></script>

<!-- Datatable Bootstrap -->
<script type="text/javascript" language="javascript" src="<?php echo $baseUrl;?>assets/js/dataTables.bootstrap.min.js"></script>

<!-- Datatable responsive js-->
<script type="text/javascript" language="javascript" src="<?php echo $baseUrl;?>assets/js/dataTables.responsive.min.js"></script>

<!-- Datatable select js-->
<script type="text/javascript" language="javascript" src="<?php echo $baseUrl;?>assets/js/dataTables.select.min.js"></script>

<!-- Propeller Data table js-->
<script>
//Propeller Customised Javascript code 
$(document).ready(function() {
    $('#example-checkbox').DataTable({
        responsive: false,
        columnDefs: [ {
            orderable: false,
            className: 'select-checkbox',
            targets:0,
        } ],
        select: {
            style: 'multi',
            selector: 'td:first-child'
        },

        order: [ 1, 'asc' ],
        bFilter: true,
        bLengthChange: true,
        pagingType: "simple",
        paging: true,
        searching: true,
        "language": {
            "sInfo": "Mostrando de _START_ até _END_ de _TOTAL_ registros",
            "sInfoEmpty":" ",
            "sLengthMenu": "_MENU_ resultados por página",
            "sSearch": "",
            "sEmptyTable": "Nenhum registro encontrado",
            "sInfoFiltered": "Filtrados de _MAX_ registros",
            "sLoadingRecords": "Carregando...",
            "sProcessing": "Processando...",
            "sInfoPostFix": "",
            "sInfoThousands": ".",
            "sSearchPlaceholder": "Pesquisar..",
            "sZeroRecords": "Nenhum registro encontrado <i class='far fa-frown'></i>",
            "paginate": {
                "sNext": " ",
                "sPrevious": " "
            },
    },
        dom:
            "<'pmd-card-title'<'data-table-title'><'search-paper pmd-textfield'f>>" +
            "<'custom-select-info'<'custom-select-item'><'custom-select-action'>>" +
            "<'row'<'col-sm-12'tr>>" +
            "<'pmd-card-footer' <'pmd-datatable-pagination' l i p>>",
    });

    /// Select value
    $('.custom-select-info').hide();

    $('#example-checkbox tbody').on( 'click', 'tr', function () {
        if ( $(this).hasClass('selected') ) {
            var rowinfo = $(this).closest('.dataTables_wrapper').find('.select-info').text();
            $(this).closest('.dataTables_wrapper').find('.custom-select-info .custom-select-item').text(rowinfo);
            if ($(this).closest('.dataTables_wrapper').find('.custom-select-info .custom-select-item').text() != null){
                $(this).closest('.dataTables_wrapper').find('.custom-select-info').show();
                //show delet button
            } else{
                $(this).closest('.dataTables_wrapper').find('.custom-select-info').hide();
            }
        }
        else {
            var rowinfo = $(this).closest('.dataTables_wrapper').find('.select-info').text();
            $(this).closest('.dataTables_wrapper').find('.custom-select-info .custom-select-item').text(rowinfo);
        }
        if($('#example-checkbox').find('.selected').length == 0){
            $(this).closest('.dataTables_wrapper').find('.custom-select-info').hide();
        }
    } );
    $("div.data-table-title").html('<h2 class="pmd-card-title-text"><?php echo $pagTitle;?></h2>');
    $(".custom-select-action").html('<button class="btn btn-sm pmd-btn-fab pmd-btn-flat pmd-ripple-effect btn-primary" type="button"><i class="material-icons pmd-sm">delete</i></button><button class="btn btn-sm pmd-btn-fab pmd-btn-flat pmd-ripple-effect btn-primary" type="button"><i class="material-icons pmd-sm">more_vert</button>');

} );

</body>
</html>

1 answer

1


I think you want something like

//.....
language: {
        select: {
            rows: "%d linhas selecionadas"
        }
}
//......

More details in the documentation officer.

Browser other questions tagged

You are not signed in. Login or sign up in order to post.