Dynatable.js從程式化列表中刪除元素並更新計數

我大多數情況下都使用dynatable網站的默認代碼來設置風格化列表。我真的很喜歡它，因爲我在我所有的領域搜索。這裏是html代碼和javascript代碼：Dynatable.js從程式化列表中刪除元素並更新計數

<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並獲得正確的計數？

感謝

來源

2014-11-04 user1050544

我用dynatable.process（），而不是刪除/更新解決了這個問題。不知道這是否是正確的解決方案，但它對我有用。

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

來源

2015-03-24 12:01:23

Dynatable.js從程式化列表中刪除元素並更新計數

回答

相關問題