Как освежать datatable и не все окно?

Я разрабатываю проект с bootstrap, php pdo и mysql, у меня есть datatable, который читает с mysql, у меня есть кнопка, которая говорит "Новый Ввод информации", уже он делает ввод информации, но я хочу освежить или обновить datatable для того, чтобы он загрузил новые данные, не будучи должен обновлять всю страницу.

Когда он сделает новый ввод информации с одинокой кнопки, освежилась секция datatable и покажите новый ввод информации.

Пока я это делаю, освежая всю страницу с window.location.href, после получая ok с jquery, который сделал ввод информации в основание новой линии.

Уже он это загружает используя ответ @Maykol-Ривас, но прекратило функционировать действие, как они увидят таблицу, у него есть данные и в последней колонне у него есть действия, пока - действие "создания истории"

               <tr class="odd gradeX">
                <td id="pacedula">14</td>
                <td>2</td>
                <td>3</td>
                <td></td>
                <td>5</td>                      
                <td class="center">
                <li class="glyphicon glyphicon-eye-open"></li>
                <li class="glyphicon glyphicon-edit"></li>
                <li class="glyphicon glyphicon-remove"></li>
                <li class="glyphicon icon-i-outpatient crearhistoria btn"></li>
                </td>
              </tr>

Что это ее назвало так с js,

   $(document).ready(function() {
    cargar_datos();
    });

   function cargar_datos(){
    $.ajax({
    url: "php/mod_listar_datos.php",
    type: "POST",
    data: {opcion:1},
    success: function(data) {
             // En caso de que se ejecute
             $('#tblPacientes > tbody').html(data);
       }
    });
   }


 $(".crearhistoria").click(function(){
      var $cedula = $(this).closest("tr").find("#pacedula").text();       
      $.ajax({
       url : 'php/mod_cre_his_paciente.php',
       type: "POST",
       method: "post",
       data : "cedula="+ $cedula,
       beforeSend: function(){              
$('#labelMensajes').fadeIn(250).html('Enviando').delay(2500).fadeOut(250);
  },
success:function(v) {
      if(v==5){                  
         $('#labelMensajespacientes').fadeIn(250).html('No se ha enviado cedula, intentelo nuevamente').delay(10000).fadeOut(250);
         //window.location.href = "ad_docentes.php";
      }else if(v==4){  
         $('#labelMensajespacientes').fadeIn(250).html('Ya se ha creado la histora Clinica del paciente con CI'+ $cedula).delay(5000).fadeOut(250);                 
      }else if(v==3){  
         $('#labelMensajespacientes').fadeIn(250).html('Se ha creado la histora Clinica').delay(2500).fadeOut(250);    
         window.location.href="hclinica.php";           
      }else{         

$('#labelMensajespacientes').fadeIn(250).html(v).delay(2500).fadeOut(250);
      }
},
      error: function() {

$('#labelMensajespacientes').fadeIn(250).html('Error: no se puedo realizar el ingreso').delay(2500).fadeOut(250);      
}});});

Но сейчас ему удается сделать совсем не эту функцию, так он это делал раньше, но с тем, что я сделал сейчас, оно не функционирует.

6
задан 15.06.2017, 08:16
5 ответов

Если ты загружаешь снова HTML, элементы DOM - sustituГ - два, и новым не было распределено событие. Вновь распредели их despuГ©s распределения HTML снова. Лучше с off/on, так как asГ - ты избегаешь удваивать вызовы.

$(".crearhistoria").off('click');$(".crearhistoria").on('click', function() { ... };

Надеялся, что он помогает

2
ответ дан 24.11.2019, 13:14

как комментирует другой друг, пробует делать просьбу AJAX, которую обновлял бы твой datatable, что-либо подобное:

$.ajax({
        url: "ruta_de_mi_archivo_php_donde_haremos_la_consulta.php",
        type: "POST",
        data: {veruser:1},
        success: function(data) {
                 // En caso de que se ejecute
                 $('#mi_tabla > tbody').html(data);
        }
 });

Сейчас, в ruta_de_mi_archivo_php_donde_haremos_la_consulta.php у тебя должно бы быть что-либо подобное

if($_POST['veruser']==1){
     //Aqui haces tu consulta para ver todos los usuarios.
     // Pero en el while que harás, deberas retornarlo con lo valores en tr y td
     //Ejemplo
     while($row = mysql_fecth_array($resulconsulta)){
           $usuarios .= '<tr>
                             <td>'.$row['id'].'<td>
                             <td>'.$row['nombre'].'<td>
                             <td>'.$row['apellido'].'<td>
                         </tr>' 
     }
     echo $usuarios;
}

Таким образом ты возвратишь прямо контент, который будет нужно наполнять в body таблицы пользователей, или где ты хотел, в самом деле ты можешь делать то, что ты хочешь, и просвет, не обновляя страницы. :) Удача

0
ответ дан 24.11.2019, 13:14
  • 1
    У меня есть проблема, как я отлаживаю то, что уже у него есть table для того, чтобы он вновь не продолжал добавлять, а именно, они удваиваются все. – Alldesign Web 02.10.2016, 16:11
  • 2
    Когда ты распределяешь результаты в таблицу используя $('#mi_tabla > tbody').html(data);, свойство .html() удаляет настоящий контент и это заменяет новым, в этом случае, который находится в переменной data – Maykol Rivas 02.10.2016, 16:20
  • 3
    Уже заметьте это, сейчас у меня есть другая проблема, уже мне удается загрузить все, но в колонне у него были значки с действиями на линии, перед тем, как это загружать, схвати и # 237; оно функционировало, но сейчас не. Я обновляю вопрос, чтобы добавлять больше c и # 243; я говорю, что ты увидел. – Alldesign Web 02.10.2016, 16:49
  • 4
    Okay, ты можешь добавлять к <li> это: onClick="CrearHistoria(this)" потом меняет твое событие $(".crearhistoria").click(function(){}); на funci и # 243; n function CrearHistoria(d){}, где d заменит в тебя this, а именно, что, где у тебя были $(this) сейчас быть и # 225; $(d) оставил Тебе пример b и # 225; sico aqu и # 237; [ jsfiddle.net/54g9f7hu/] где tambi и # 233; n met и # 237; funci и # 243; n, чтобы удалять линию удалять, ты можешь играть с c и # 243; я говорю – Maykol Rivas 02.10.2016, 17:38
  • 5
    С которым ты показываешь меня, функционируй хорошо, но сейчас другая проблема в datatable bootstrap (Bootstrap v3.3.7), он не позволяет мне искать, когда я удаляю текст в поле искать, вновь не наполняются тексты. – Alldesign Web 02.10.2016, 18:45

Уже они дали тебе ответ, который предлагает тебе подать код HTML с сервера. Другой выбор (и стандартнее) состоит в том, чтобы подавать реестры как JSON.

Предполагая, что ты делаешь консультацию с LIMIT, чтобы получать последние 10 реестров

$json = array();
// convierte el resultset a array
// para convertirlo a JSON
for($row = $rs->fetch_assoc()) {
  $json[] = $row;
}
echo json_encode($json);

ЗАМЕТЬ: ты должен иметь в виду порядок в query.

В твоем коде язык сценариев JavaScript, ты получаешь реестры в JSON из-за AJAX.

$.getJSON('/get_records.php', function(records) {
  $('#tabla').empty(); // limpia la tabla -> forma "fácil"
  records.forEach(function (record, i) {
    const cell = document.querySelector(`table td:nth-child(${i})`);
    // obtiene la clave (columna) del JSON para obtener el valor
    let key = Object.keys(record)[0];
    cell.textContent = record[key];
  });
});
0
ответ дан 24.11.2019, 13:14

, Предложенные 1: Использовав plugin DataTable, также использовав API , которых он поставляет

, Когда я вхожу в: http://www.fabisaconfecciones.com/hampi/pacientes.php

Сохранил в архиве: tables.js - Здесь ты мог бы делать следующие изменения:

$('#tblPacientes').DataTable({
  deferLoading: 0, // Indicamos que la carga inicial se hace manual
  serverSide: true, // Indicamos que todos tipo de proceso se hace en el Backend
  ajax: {
    url: 'php/mod_listar_datos.php',
    type: 'POST',
    data: function(params) {
      // Aqui deberas analizar lo que DT envia
      // y de ser necesario modificarlo a tu antojo
      // IMPORTANTE: param.draw deber ser enviado y devuelto.
      return params;
    },
    dataSrc: function(response) {
      // Idealmnete el servidor devolveria una respuesta JSON
      // por lo que response seria un objeto
    }
  }
});

Сохранил в архиве: pacientes.js - Здесь я рекомендую удалять ее funciГіn cargar_datos - И в местах, где она названа, заменять это из-за:

$('#tblPacientes').DataTable().ajax.reload();

Больше info: https://datatables.net/reference/option/ajax

, Предложенные 2: Не использовать plugin DataTable и делать все в руку.

0
ответ дан 24.11.2019, 13:14
  • 1
    Я протестирую это таким образом – Alldesign Web 12.10.2016, 22:21
  • 2
    Я это попробовал, как ты это сказал, но он ничего не загружает и дает ошибку в reload, выходит у меня, что не определена funció n. – Alldesign Web 27.11.2016, 02:50
  • 3
    @AlldesignWeb, извинение, видно, что я не понял, что результата 'php/mod_listar_datos.php' HTML. Мой ответ только служит, если результата один JSON. – Marcos 27.11.2016, 16:36

Есть способ манипулировать ajax с datatable, и я думаю, что это лучший способ работать она librerГ - в.

javascript

$(document).ready(function() {
    $('#example').DataTable( {
        "ajax": "data/arrays.txt"
    } );
} );

html:

<table id="example" class="display" cellspacing="0" width="100%">
    <thead>
        <tr>
            <th>Name</th>
            ....
        </tr>
    </thead>
</table>

шрифт: https://datatables.net/examples/ajax/simple.html

tambiГ©n ты можешь находить из-за paginaciГіn, aГ±adiendo поля как "total_paginas", "cantidad_registros", "следующие"...

0
ответ дан 24.11.2019, 13:14