0

定型化されたリストの dynatable Web サイトのデフォルト コードの大部分を使用しています。すべてのフィールドで検索できるので、とても気に入っています。ここにhtmlコードとjavascriptコードがあります:

   <ul id="ul-example" class="row-fluid no-bullets">
       <?php foreach ($dms as $k => $v): ?>

       <li class="span12" data-color="gray" id="manage_vehicle_id_<?= $v['id'];?>">                                      
                                  <div class="thumbnail">

                                        <div class="thumbnail-image">
                                            <center>
                                          <img src="<?= $v['image']; ?>" width="220" height="180" />
                                          </center>
                                        </div>

                                    <div class="caption">       
                                      <center>
                                        <h5><?= $v['year'] . ' ' . $v['make'] . ' ' . $v['model'] . ' ' . $v['trim'];?></h5>
                                      </center>
                                      <hr>
                                      <center>
                                        <p><b>Vin:</b> <?= $v['vin']; ?></p>
                                        <p><b>Stock #:</b> <?= $v['stock'];?></p>
                                      </center>
                                      <hr>
                                      <p>
                                        <center>
                                            <button class="btn btn-primary" onclick="getVehicleDetailsByid('<?= $v['id']; ?>');"><i class="fa fa-edit"></i>&nbsp;Edit</button>
                                            <button class="btn btn-danger" onclick="openDeleteVehicleByIdModal('<?= $v['id']; ?>', '<?= $v['vin']; ?>', '<?= $v['stock'];?>');"><i class="fa fa-minus"></i>&nbsp;Delete</button>
                                        </center>
                                      </p>
                                    </div>
                                  </div>
                                </li>

                                <?php endforeach; ?>
                            </ul>


    function ulWriter(rowIndex, record, columns, cellWriter) {
  var cssClass = "span12", li;
  if (rowIndex % 3 === 0) { cssClass += ' first'; }
  li = '<li class="' + cssClass + '" id="'+record.id+'" data-row-index="'+rowIndex+'"><div class="thumbnail"><div class="thumbnail-image">' + record.thumbnail + '</div><div class="caption">' + record.caption + '</div></div></li>';
  return li;
}

// Function that creates our records from the DOM when the page is loaded
function ulReader(index, li, record) {
  var $li = $(li),
  $caption = $li.find('.caption');
  record.thumbnail = $li.find('.thumbnail-image').html();
  record.caption = $caption.html();
  record.label = $caption.find('h5').text();
  record.description = $caption.find('p').text();
  record.color = $li.data('color');
  record.id = $li.attr('id');
  record.index = $li.attr('data-row-index');
}

$( '#ul-example' ).dynatable({
    table: {
        bodyRowSelector: 'li'
    },
    writers: {
        _rowWriter: ulWriter
      },
      readers: {
        _rowReader: ulReader
      },
    features: {
        paginate: false,
        sort: true,
        search: true,
        recordCount: true,
        perPageSelect: false
      },
      inputs: {
          searchTarget: '#manage_vehicle_search',
          recordCountTarget: '#manage_vehicle_recordCount'
      }
});

HTMLでわかるように、レコードを削除する削除ボタンがあります。手動で削除できます。ただし、実際には削除されません。検索クエリが発生したとき、アイテムはまだリストにあります。私はそれを削除します:

$( '#manage_vehicle_id_'+id ).remove();
var dynatable = $('#ul-example').data('dynatable');
        dynatable.domColumns.removeFromArray(index);
        dynatable.dom.update();

column.length is null のようなエラーが表示されます。dynatable の this.remove メソッドがエラーをスローしていることがわかります。

このアイテムをリストから削除し、dynatable dom を更新して正しいカウントを取得するにはどうすればよいですか?

ありがとう

4

1 に答える 1