データテーブルの検索フィールドに機能を追加したいのですが、入力フィールド内のアイコンをクリックすると、検索されたテキストがクリアされます。
ここに機能する明確な検索jsfiddleがあります：
http://jsfiddle.net/PJZmv/801/
そして私はこれをここのデータテーブルと統合しようとしています：
http://jsfiddle.net/rwone/Y37hZ/
これらは私が取ったステップです：
jquery.dataTables.js以下を変更してスクリプトをカスタマイズします。
sSearchStr.replace('_INPUT_', '<input type="text" />') :
sSearchStr==="" ? '<input type="text" />' : sSearchStr+' <input type="text" />';
に：
sSearchStr.replace('_INPUT_', '<span class="clearable"><input type="text" name="data_field" value="" /><span class="icon_clear">x</span></span>') :
sSearchStr==="" ? '<span class="clearable"><input type="text" name="data_field" value="" /><span class="icon_clear">x</span></span>' : sSearchStr+' <span class="clearable"><input type="text" name="data_field" value="" /><span class="icon_clear">x</span></span>';
そしてこのcssを追加しました：
/* added clear search css */
.clearable {
position:relative;
}
.data_field {
padding-right:30px; /* add space for the 'x' icon*/
}
span.icon_clear {
position:absolute;
right: 9px;
display: none;
top: -2px;
cursor:pointer;
font: bold 14px sans-serif;
color:#cc0000 !important;
}
span.icon_clear:hover {
color:#f52 !important;
}
/* end added clear search css */
次に、jqueryを追加しました。
$(document).on('propertychange keyup input paste', 'input.data_field', function(){
var io = $(this).val().length ? 1 : 0 ;
$(this).next('.icon_clear').stop().fadeTo(300,io);
}).on('click', '.icon_clear', function() {
$(this).delay(300).fadeTo(300,0).prev('input').val('');
});
しかし、jsfiddleでわかるように、まだ機能していません。
したがって、望ましい結果は、スタンドアロンのjsfiddleと同様に、「クリア検索」機能がdatatables統合で機能することです。