【发布时间】：2019-11-13 09:03:47
【问题描述】：
我在尝试更新行时遇到Datatable AltEditor 问题。
顺便说一句，我正在使用烧瓶作为后端。
这是我的设置：
首先我会告诉你数据表是什么样子的
HTML 表格：
<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
});
}
});
});
在以下示例中，我将更改名为 Arturo Casanova 的用户的密码，从“123”更改为“密码”
当我完成编辑并单击保存更改后，我会收到有关请求的未知参数的警告。
当我关闭警告时，我会收到成功消息
但是编辑的行没有正确插入
如果我点击 Refrescar 按钮（刷新按钮），它将正确显示在数据表上
这是current JSON obtained by Flask Route'/getProfesores')
这是JSON response after editing the row，现在应该出现在数据表上
这是我正在使用的脚本
<!--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>
【问题讨论】：
标签： ajax flask datatable jquery-datatables-editor