javascript 创造DATATABLE JQUERY

Posted 2021-05-03

    $('#TipoPagosInicio').DataTable({
        //"aaSorting": [[3, "desc"]], // Sort by first column descending
        //"aaSorting": [[6, "desc"]], // Sort by first column descending
        order: [[3, 'desc'], [6, 'desc']],
        'lengthChange': false,
        dom: 'Bfrtip',
        responsive: true,
        columns: [
            { "data": 'Tipo_Pago_Nombre' },
            {
                "data": 'Periocidad',
                'render': function (data, type, row) {
                    return row.Periocidad == "QU" ? "Quincenal" : row.Periocidad == "SE" ? "Semanal" : row.Periocidad == "ME" ? "Mensual" : ""
                }
            },
            { "data": 'Usuario_Crea_Login' },
            {
                "data": 'null',
                'render': function (data, type, row) {

                    let Fecha_Crea = moment(row.Fecha_Crea).format('L');
                    return Fecha_Crea
                }
            },
            { "data": 'Usuario_Modifica_Login' },
            {
                "data": 'Fecha_Modifica',
                'render': function (data, type, row) {
                    let Fecha_Modifica = "";
                    if (moment(row.Fecha_Modifica).format('YYYY') != "1900") {
                        Fecha_Modifica = moment(row.Fecha_Modifica).format('L');
                    }

                    return Fecha_Modifica
                }
            },
            {
                "data": 'Estado',
                'render': function (data, type, row) {
                    return row.Estado == "GU" ? "Guardado" : "Anulado"
                }
            },
            {
                "data": 'null',
                'render': function (data, type, row) {
                    let habilitar = (row.Estado == "GU" ? "" : "disabled");
                    return `<a href="./TipoPagos/Index?tipoPago=${row.Tipo_Pago_Id}"><button class="btn btn-primary btn-xs"  data-Id="${row.Tipo_Pago_Id}"  ${habilitar} >Editar</button></a>
                            <button class="btn btn-primary btn-xs" onclick="generarPago(this);" data-Tipo="${row.Tipo_Pago_Fijo}" data-perinicio="${row.Periodo_Inicio_Fecha}" data-perfin="${row.Periodo_Fin_Fecha}" data-cc="${row.Cuenta_Contable_Id}" data-Period="${row.Periocidad}" data-Id="${row.Tipo_Pago_Id}"  ${habilitar} >Generar</button>
                            <button class="btn btn-primary btn-xs" onclick="enviaCorreoUltimoPago(this);" data-Tipo="${row.Tipo_Pago_Fijo}" data-perinicio="${row.Periodo_Inicio_Fecha}" data-perfin="${row.Periodo_Fin_Fecha}" data-cc="${row.Cuenta_Contable_Id}" data-Period="${row.Periocidad}" data-Id="${row.Tipo_Pago_Id}"  ${habilitar} >Enviar</button>
                            <button type="button" class="btn btn-danger btn-xs" onclick="AnularTipoPago(this);" data-nom="${row.Tipo_Pago_Nombre}" data-Id="${row.Tipo_Pago_Id}" ${habilitar} >Anular</button>`
                }
            }

        ],
        buttons: [
           
        ],
        language: {
            "decimal": "",
            "emptyTable": "No hay información",
            "info": "Mostrando _START_ a _END_ de _TOTAL_ Entradas",
            "infoEmpty": "Mostrando 0 to 0 of 0 Entradas",
            "infoFiltered": "(Filtrado de _MAX_ total entradas)",
            "infoPostFix": "",
            "thousands": ",",
            "lengthMenu": "Mostrar _MENU_ Entradas",
            "loadingRecords": "Cargando...",
            "processing": "Procesando...",
            "search": "Buscar:",
            "zeroRecords": "Sin resultados encontrados",
            "paginate": {
                "first": "Primero",
                "last": "Ultimo",
                "next": "Siguiente",
                "previous": "Anterior"
            }
        }
    });