FooTable : Filter dropdown (테이블에 대한 사용자 지정 드롭다운 필터를 만드는 방법.)

 

FooTable : Filter dropdown (테이블에 대한 사용자 지정 드롭다운 필터를 만드는 방법.)

 

 

별도의 커스텀 적용할 필드에는 data-type="html" data-name="status" 가 존재한다. 여기서 status 는 키값이니 꼭 명시해야 한다.

<div class="container">

  <table id="tabella" class="table is-bordered is-fullwidth" style="margin-top: 16px;">
  <thead>
    <tr>
      <th data-breakpoints="xs">PL</th>
      <th data-type="html" data-name='status'>Status</th>
      <th data-breakpoints="xs sm">Total Time</th></tr>
   </thead>
   <tbody>
     <tr>
       <td>1</td>
       <td><a href="#">GAR</a></td>
       <td>20:04:12</td>
     </tr>
     <tr>
       <td>2</td>
       <td><a href="#">AUG1</a></td>
       <td>20:13:35</td>
     </tr>
      <tr>
       <td>3</td>
       <td><a href="#">JAIL</a></td>
       <td>10:17:35</td>
     </tr>
     <tr>
       <td>4</td>
       <td><a href="#">JAILi</a></td>
       <td>10:17:35</td>
     </tr>
     <tr>
       <td>5</td>
       <td><a href="#">JAILs</a></td>
       <td>10:17:35</td>
     </tr>
   </tbody>
</table>
</div>

 

 

지정한  data-name="status"  처럼 dropdownlist 로 기술해 주며, this.statuses 배열은 검색필터를 지정해 주는 부분입니다. this.def 는 "전체" 라는 처음 보일 문구를 지정한 것입니다.

$(function() {
  $('.table').footable({
    filtering: {
      enabled: true
    }, 
    components: {
		filtering: FooTable.MyFiltering
	}
  });  
});

 
FooTable.MyFiltering = FooTable.Filtering.extend({
	construct: function(instance){
		this._super(instance);
		this.statuses = ['GAR','AUG1','JAILi'];
		this.def = 'Any Status';
		this.$status = null;
	},
	$create: function(){
		this._super();
		var self = this,
			$form_grp = $('<div/>', {'class': 'form-group'})
				.append($('<label/>', {'class': 'sr-only', text: 'Status'}))
				.prependTo(self.$form);

		self.$status = $('<select/>', { 'class': 'form-control' })
			.on('change', {self: self}, self._onStatusDropdownChanged)
			.append($('<option/>', {text: self.def}))
			.appendTo($form_grp);

		$.each(self.statuses, function(i, status){
			self.$status.append($('<option/>').text(status));
		});
	},
	_onStatusDropdownChanged: function(e){
		var self = e.data.self,
			selected = $(this).val();
		if (selected !== self.def){
			self.addFilter('status', selected, ['status']);
		} else {
			self.removeFilter('status');
		}
		self.filter();
	},
	draw: function(){
		this._super();
		var status = this.find('status');
		if (status instanceof FooTable.Filter){
			this.$status.val(status.query.val());
		} else {
			this.$status.val(this.def);
		}
	}
});

 

 

결과

 

https://codepen.io/arfry/pen/OJMNVNV

Footable, dropdown filter

 

문서

 

https://fooplugins.github.io/FooTable/docs/examples/advanced/filter-dropdown.html

Filter dropdown - FooTable