Estoy desarrollando una aplicación, en la cual tengo un par de textbox como input, el objetivo es que, el usuario escriba un número de orden en el input y hacer una consulta a la base de datos para sacar información de ese número de orden y al final colocar esa información en una tabla. En seguido muestro una pantalla de la web:
El problema que tengo es que, en el contenedor "search by", cuando el usuario busca la información por orden aparece un el input, coloca el nombre de orden y esta va y busca a la BD, después mediante ajax hago la escritura en la tabla.. el problema viene cuando quiero hacer un sort con los eventos de data table, al hacer clic a cualquiera de ellos los datos que coloque en mi tabla desaparecen, por ejemplo:
Aquí tengo el dato en mi tabla al enviarlo mediante un boton con submit y ajax, cuando doy clic en el evento desaparecen mis datos:
Alguien sabe como puedo solucionar esto?, es decir, que cuando de clic en cualquier evento, mis datos esten guardado y no se pierdan.
Dejo el código html:
Formulario de los inputs
<!-- Order or MFGN form begin-->
<p class="ibm-margin-top-2" id="order">
<label for="order-mfgn" class="" id="Enter"> Enter order</label>
<span class="ibm-center-block">
<input type="text" id="order-value"> <button class="ibm-btn-pri ibm-btn-blue-50" id="submit-order" type="submit" name="order">Submit</button>
</span>
</p>
<p class="ibm-margin-top-2" id="mfgn">
<label for="mfgn-value" class="" id="Enter"> Enter mfgn </label>
<span class="ibm-center-block">
<input type="text" id="mfgn-value" > <button class="ibm-btn-pri ibm-btn-blue-50" id="submit-mfgn" type="submit">Submit</button>
</span>
</p>
</form>
<!-- Enter the order MFGN end -->
contenedor de la tabla (jinja2)
<div class="ibm-col-12-8 ibm-margin-top-3">
<!-- table container begin-->
{% block table %} {% endblock %}
</div>
Javascript para obtener los datos y enviarlos a la tabla
$(document).ready(function() {
$('#submit-order').click(function(evt) {
evt.preventDefault();
var order = $('#order-value').val();
data = {
order: order
}
console.log(data);
$.ajax({
type: "POST",
url: "/",
data:data,
success: function(response) {
// console.log('The data is send successfully' + response.order);
$('#data').html(
"<tr>"+
"<td>"+ response.order+"</td>"+
"<td>"+ response.Mfgn+"</td>"+
"<td>"+response.Test+"</td>"+
"<td>"+response.Date+"</td>"+
"<td>"+ response.Expected+"</td>"+
"</tr>"
)
$('#Enter').value = "";
}
});
});
// $('#submit-mfgn').click(function() {
// // alert('clic')
// console.log('clic');
});
});