0

Estoy usando la libreria Jquery datatable edit ya lleno mi tabla con datos de una BD, ¿Como puedo saber el id del registro que se va a actualizar? y ¿Como haria el proceso de actualizar sobre mi BD? introducir la descripción de la imagen aquí

mi codigo es este

<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.12/css/jquery.dataTables.min.css">
 <link rel="stylesheet" type="text/css" href="https://editor.datatables.net/extensions/Editor/css/editor.dataTables.min.css">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="https://cdn.datatables.net/1.10.7/js/jquery.dataTables.min.js"></script>
<script src="~/Scripts/dtE.js"></script>
<script type="text/javascript">
    var editor; // use a global for the submit and return data rendering in the examples
    $(document).ready(function () {
        
        editor = new $.fn.dataTable.Editor({
            dom: "Tfrtip",
            "ajax": "adendum1",
            "table": "#example",
            "fields": [{
                "label": "First name:",
                "name": "first_name"
            }, {
                "label": "Last name:",
                "name": "last_name"
            }, {
                "label": "Position:",
                "name": "position"
            }, {
                "label": "Office:",
                "name": "office"
            }, {
                "label": "Extension:",
                "name": "extn"
            }, {
                "label": "Start date:",
                "name": "start_date",
                "type": "datetime"
            }, {
                "label": "Salary:",
                "name": "salary"
            }
            ]
        });

        // Edit record
        $('#example').on('click', 'a.editor_edit', function (e) {
            e.preventDefault();
            
            editor.edit($(this).closest('tr'), {
                title: 'Edit record',
                buttons: 'Update'
            });
        });

        $('#example').dataTable({
            dom: "Tfrtip",
            ajax: "adendum1",
            //data: function (data) { return data = JSON.stringify(data); },
            columns: [

                
                {
                    data: null, render: function (data, type, row) {
                        // Combine the first and last names into a single table field
                        return data.first_name + ' ' + data.last_name;
                    }
                },
                { data: "position" },
                { data: "office" },
                { data: "extn"},
                { data: "start_date"},
                { data: "salary"},
                {
                    data: null,
                    className: "center",
                    defaultContent: '<a href="" class="editor_edit">Edit</a> / <a href="" class="editor_remove">Delete</a>'
                }
            ]
        });
    });
</script>

<div>

<table id="example" class="display" cellspacing="0" width="100%">
        <thead>
            <tr>
                <th></th>
                <th>Position</th>
                <th>Office</th>
                <th>Extn.</th>
                <th>Start date</th>
                <th>Salary</th>
                <th>Edit / Delete</th>
            </tr>
        </thead>
        <tfoot>
            <tr>
                <th></th>
                <th>Position</th>
                <th>Office</th>
                <th>Extn.</th>
                <th>Start date</th>
                <th>Salary</th>
                <th>Edit / Delete</th>
            </tr>
        </tfoot>
    </table>
</div>

8
  • No conozco ese plugin mucho, pero donde defines la accion que abre el modal para editar los campos?
    – sioesi
    Commented el 14 nov. 2016 a las 16:00
  • @sioesi al parecer es en donde esta la instancia -> editor = new $.fn.dataTable.Editor({...})
    – Ivxn
    Commented el 14 nov. 2016 a las 16:03
  • estaba viendo la documentacion y hace referencia con ajax a archivos php en ese caso, que obtienen los datos, los modifican y vuelven a retornarlos, creo que por ese lado va, debes echar una miradita a la documentacion
    – sioesi
    Commented el 14 nov. 2016 a las 16:21
  • @sioesi si revise pero no entendi mucho ya que estoy trabajando con .NET
    – Ivxn
    Commented el 14 nov. 2016 a las 16:26
  • editor.datatables.net/manual/net antiguamente y por lo que estuve leyendo, Datatables trabajaban solo con php, pero aqui hay documentacion de como utilizarla con .net!
    – sioesi
    Commented el 14 nov. 2016 a las 16:29

1 respuesta 1

1

Yo lo hago de la siguiente manera:

<button onclick="actualizar(<?php echo $datos['id']; ?>);" >Actualizar</button>

Y la función actualizar es una función que recibe el id de la fila que se quiere editar y está así:

function actualizar(id){
  // Quita el modal
  $('.bs-modal').modal('hide');
  // Ajax que actualiza la base de datos y en success se edita la fila
  $.ajax({
        type: 'post',
        url: 'archivo_actualizar.php',
        dataType: 'json',
        data: { 'id' : id},
        // Regresa json con datos
        success: function (data) {
        // Cambia el 2 por la columna que quieres editar
          $('#tabla_DataTable').dataTable().fnUpdate(data.campo_bd , $('tr#'+id)[0], 2 );

        }
    });

}

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.