2013-08-30 64 views
1

我正在使用jQuery Tabelsorter,它的工作效果很好。告訴jQuery Tablesorter,其中​​值位於

但我想在每個字段內輸入標籤,其中排序腳本的值位於輸入值參數內。

NOW:<td><?php echo $value; ?></td>

目標:<td><input value="<?php echo $value; ?>"></td>

我如何才能知道的jQuery的tablesorter新的 「價值」 的位置?

發現在2.0的tablesorter樣品http://tablesorter.com/docs/example-option-text-extraction.html

例子:

textExtraction: function(node) { 
      // extract data from markup and return it 
      return node.childNodes[0].childNodes[0].innerHTML; 
} 

我的嘗試,但不工作:

textExtraction: function(node) { 
      // extract data from markup and return it 
      return node.childNodes[0].val(); 
} 

回答

2

相反表分揀機使用kendoui.its提供更多的功能&容易使用 kendoui

+0

這是一個不錯的選擇,但爲什麼會有免費的產品在那裏很好? – Mottie

0

使用updateCell方法時,原始tablesorter插件存在問題,因此更新輸入值時此方法不起作用。但是你可以試試我的fork of tablesorter,它沒有這個問題。

Here is a demo以下所有代碼放在一起。的

基本上不使用textExtraction適用於所有表格單元格,你只需要添加一個解析器:

$.tablesorter.addParser({ 
    id: "inputs", 
    is: function() { 
     return false; 
    }, 
    format: function (s, table, cell) { 
     return $(cell).find('input').val() || s; 
    }, 
    type: "text" 
}); 

然後告訴的tablesorter哪一列將它應用到(從零開始的索引):

$('table').tablesorter({ 
    headers: { 
     0: { sorter: "inputs" } // zero-based index (first column = column 0) 
    } 
}); 

然後請確保輸入的任何改變(除非你讓他們只讀)被公認的tablesorter併發送至您的服務器

var resort = true, // resort table after update 

// update all input types within the tablesorter cache when the change event fires. 
// This method only works with jQuery 1.7+ 
// you can change it to use delegate (v1.4.3+) or live (v1.3+) as desired 
// if this code interferes somehow, target the specific table $('#mytable'), 
// instead of $('table') 
$(window).load(function() { 
    // this flag prevents the updateCell event from being spammed 
    // it happens when you modify input text and hit enter 
    var alreadyUpdating = false; 
    $('table').find('tbody').on('change', 'input', function (e) { 
     if (!alreadyUpdating) { 
      var $tar = $(e.target), 
       $table = $tar.closest('table'); 
      alreadyUpdating = true; 
      $table.trigger('updateCell', [ $tar.closest('td'), resort ]); 

      // *** update your server here *** 

      setTimeout(function() { 
       alreadyUpdating = false; 
      }, 10); 
     } 
    }); 
});