Update record in BD with datatable edit JQuery

Question

Update record in BD with datatable edit JQuery

Navigation

#1 by (1 votes)

0

I'm using the Jquery datatable edit library and I've already filled my table with data from a DB, how can I know the id of the record that will be updated? and How would the process of updating on my BD?

my code is this

<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>

jquery datatables

asked by Ivxn 14.11.2016 в 04:31

source

1 answer

Count letters in a string in R with while () No query appears on Android

score 1 · Answer 1

I do it in the following way:

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

And the update function is a function that receives the id of the row that you want to edit and looks like this:

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 );

        }
    });

}