Использование Datatables AltEditor запросил неизвестный параметр - PullRequest
0 голосов
/ 02 июля 2019

У меня проблемы с Datatable AltEditor , когда я пытаюсь обновить строки.

Кстати, я использую колбу как бэкэнд.

Это мойsetup:

Сначала я покажу вам, как выглядит таблица данных

Datatables example

Html table:

<div id='contenidoBienvenida'>
    <table class="dataTable table table-striped" id="example" style="width: 100%">

    </table>
</div>

Маршруты фляги:

@app.route('/getProfesores') #This route sends the json data with all the teachers
def getProfesores():
    if 'numEmpleado' in session:
        try:
            cur = mysql.connection.cursor()
            cur.execute("SELECT * FROM usuarios")
            r = [dict((cur.description[i][0], value)  # IF NULO hacer algo
                      for i, value in enumerate(row)) for row in cur.fetchall()]
            if (len(r) == 0):
                return "No hay profesores"
            return json.dumps({'data': r})
        except Exception as e:
            print(str(e))
    return redirect(url_for('home'))


#This route receives the desired data to be edited, saves changes and returns new data as JSON
@app.route('/editar/profesor/', methods=['GET']) 
def editarProfesor():
    if 'numEmpleado' in session:
        try:
            numEmpleado = request.args.get('NumEmpleado')
            nombre = request.args.get('nombre')
            password = request.args.get('password')
            correo = request.args.get('correo')
            tipoCuenta = request.args.get('tipoCuenta')
            perfilCompletado = request.args.get('perfilCompletado')

            cur = mysql.connection.cursor()
            query = "UPDATE usuarios SET NumEmpleado = %s, nombre = %s, password = %s, correo = %s, tipoCuenta = %s, perfilCompletado = %s WHERE NumEmpleado = %s"
            cur.execute(query, (numEmpleado,nombre,password,correo,tipoCuenta,perfilCompletado,numEmpleado))
            mysql.connection.commit() #Execute the update sql

            cur.execute( #Now it grabs the edited row
                "SELECT * FROM usuarios WHERE usuarios.NumEmpleado=%s" %
                numEmpleado)
            r = cur.fetchone()
            cur.close()
            return json.dumps({'data': r}) #sends the edited row as JSON -- SUCCESS
        except Exception as e:
    return redirect(url_for('home'))

profesoresDatatable.js:

$(document).ready(function() {

  var columnDefs = [{
    data: "NumEmpleado",
    title: "Número Empleado",
  },
  {
    data: "nombre",
    title: "Nombre"
  },
 {
    data: "password",
    title: "Password"
  },
 {
    data: "correo",
    title: "Mail"
  },
 {
    data: "tipoCuenta",
    title: "Tipo Cuenta"
  },
 {
    data: "perfilCompletado",
    title: "¿perfilCompletado?"
  }];

  var myTable;

  // local URLs are not allowed
  var url_ws_mock_get = './getProfesores'; #Flask route which fill the datatable
  var url_ws_mock_ok = './mock_svc_ok.json'; #not used

  myTable = $('#example').DataTable({
    "sPaginationType": "full_numbers",
    destroy: true,
    responsive: true,
    ajax: {
        url : url_ws_mock_get, #Flask route to obtain json data
        // our data is an array of objects, in the root node instead of /data node, so we need 'dataSrc' parameter
        dataSrc : 'data'
    },
    columns: columnDefs,

        dom: 'Bfrtip',        // Needs button container
        select: 'single',
        responsive: true,
        altEditor: true,     // Enable altEditor
        buttons: [{
            text: 'Agregar',
            name: 'add'        // do not change name
        },
        {
            extend: 'selected', // Bind to Selected row
            text: 'Editar',
            name: 'edit'        // do not change name
        },
        {
            extend: 'selected', // Bind to Selected row
            text: 'Borrar',
            name: 'delete'      // do not change name
        },
        {
            text: 'Refrescar',
            name: 'refresh'      // do not change name
        }],
        onAddRow: function(datatable, rowdata, success, error) {
            $.ajax({
                // a tipycal url would be / with type='PUT'
                url: url_ws_mock_ok,
                type: 'GET',
                data: rowdata,
                success: success,
                error: error
            });
        },
        onDeleteRow: function(datatable, rowdata, success, error) {
            $.ajax({
                // a tipycal url would be /{id} with type='DELETE'


   url: url_ws_mock_ok,
            type: 'GET',
            data: rowdata,
            success: success,
            error: error
        });
    },
    onEditRow: function(datatable, rowdata, success, error) { 
        $.ajax({
            // a tipycal url would be /{id} with type='POST'
            url: './editar/profesor/', #flask route which save changes and returns edited row as JSON
            type: 'GET',
            data: rowdata,
            success: success,
            error: error
        });
    }
  });


});

В следующем примере я изменю пароль для пользователя с именем Артуро Казанова, с '123' на 'пароль'

enter image description here

Когда я закончу редактирование и нажимаю кнопку Сохранить изменения, я получаю предупреждение о запрошенных неизвестных параметрах.

enter image description here

Когда я закрываю предупреждение, я получаю сообщение об успехе

enter image description here

Но отредактированная строка неправильно вставлено

enter image description here

Если я нажму кнопку Refrescar (кнопка обновления), она будет отображаться в таблице данных правильно

enter image description here

Это текущий JSON, полученный Flask Route '/ getProfesores')

Это ответ JSON после редактирования строки , которыйтеперь должно появиться в datatable

Это сценарии, которые я использую

<!--SCRIPTS-->
  <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
    integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
    crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
    integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
    crossorigin="anonymous"></script>
  <script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
  <script type="text/javascript"
    src="https://cdn.datatables.net/v/bs4/jszip-2.5.0/dt-1.10.18/b-1.5.6/b-colvis-1.5.6/b-flash-1.5.6/b-html5-1.5.6/r-2.2.2/sl-1.3.0/datatables.min.js"></script>
  <script src="{{url_for('static', filename='js/dataTables.altEditor.free.js')}}"></script>
  <script src="{{url_for('static', filename='js/profesoresDatatable.js')}}"></script>

1 Ответ

0 голосов
/ 03 июля 2019

Работает

Я изменил строку 285 dataTables.altEditor.free.js

that._editRowCallback ( data , b, c, d, e); изменено на that._editRowCallback ( rowDataArray , b, c, d, e);

Полный раздел:

that.onEditRow(that,
                    rowDataArray,
                    function(data,b,c,d,e){ that._editRowCallback(rowDataArray,b,c,d,e); },
                    function(data){ that._errorCallback(data);
                });

А теперь этоне показывает предупреждения и обновляется как надо

...