Question

我在大多数情况下使用dynatable网站的默认代码来获得程式化列表。我非常喜欢它，因为我搜索了所有的字段。这是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的错误。我可以看到dynatable中的this.remove方法抛出错误。

如何从列表中删除此项并更新dynatable dom并获得正确的计数？

由于

Answer 1

我通过使用dynatable.process（）而不是remove / update解决了这个问题。不确定它是否是正确的解决方案，但它对我有用。

$( '#manage_vehicle_id_'+id ).remove();
var dynatable = $('#ul-example').data('dynatable');
dynatable.process();

Dynatable.js从样式化列表中删除元素并更新计数

1 个答案: