Datatable активировать редактирование одной ячейки по клику (часть 2) - PullRequest
Новая
       26

Datatable активировать редактирование одной ячейки по клику (часть 2)

0 голосов
/ 07 мая 2019

Продолжая мою предыдущую проблему, найденную здесь:

Datatable активировать редактирование одной ячейки по клику

Я наконец смог получить только одну ячейку для активации поля ввода по щелчку мыши.

Моя новая проблема заключается в том, что, хотя я могу щелкнуть одну ячейку и активировать ее, когда я использую поиск по датируемому фильтру или перехожу на другую страницу таблицы данных, активация ячейки больше не работает. 

$.ajax({
  url: 'api/searchVoyageInfo.php',
  type: 'POST',
  data: '',
  dataType: 'html',
  success: function(data, textStatus, jqXHR){
    var jsonObject = JSON.parse(data); 
    var table = $('#example1').DataTable({
      "data": jsonObject,
      "columns": [{ 
        { "data": "COLUMN1" },  
        { 
          "data": "COLUMN2",
          "fnCreatedCell": function (nTd, sData, oData, iRow, iCol)
          {
            $(nTd).html("<a href='#' class='checkBound"+oData.VOYID+"' id='checkBound' 
                         data-uid='"+oData.VOYID+"'>"+oData.COLUMN2+"</a>
                         <input type='text' class='editbound"+oData.VOYID+"' 
                         id='editbound' data-uid='"+oData.VOYID+"' 
                         value='"+oData.BOUND+" display: none;' />");
          }
        },
        { "data": "COLUMN3" },
        // few more columns
      }],
      "iDisplayLength": 50,
      "paging": true,
      "bDestroy": true,
      "autoWidth": true,
      "dom": 'Bfrtip',
       "buttons": [
        // some extend buttons
      ]
    });
  },
  error: function(// some stuff){
    // do some other stuff
    // this part is not important
  }
});

Если вы обратите внимание на раздел COLUMN2 выше, я добавил значение VOYID в класс checkBound href. Я также добавил VOYID в редактируемый класс ввода. Это предотвратило активацию ввода каждым классом checkBound с помощью события onclick, указанного ниже: 

$('#example1').on('click', 'tr > td > a.checkBound', function(e)
{
  e.preventDefault();
  var $dataTable = $('#example1').DataTable();
  var tr = $(this).closest('tr');
  var data = $dataTable.rows().data();
  var rowData = data[tr.index()];

  var voyid = rowData.VOYID;

  console.log(voyid);

  $('.checkBound'+voyid).hide();
  $('.editbound'+voyid).show();
});

Используя все вышеперечисленное, на первой странице таблицы данных я могу успешно активировать ввод из одной ячейки по щелчку мыши. Но это работает только на первой странице. Я не могу активировать ввод на любой другой странице.

Я попытался переключить событие onclick с использования класса на id, достигнув тех же результатов.

Как я могу решить эту проблему?

1 Ответ

2 голосов
/ 07 мая 2019

Вы можете скрыть ссылку и показать поле со следующим кодом в вашем обработчике событий клика 

e.preventDefault();
$(this).hide().next().show();
...