请参阅此FIDDLE,但我无法使用从原始github获取的外部js。不知道为什么。 https://raw.githubusercontent.com/kolgepratik/tableutils/master/js/tableutils.js
这里的问题是表的当前过滤如下所示: - >样本表:
[column1 table header title] [column2 table header title]
[column1 input for filtering] [column2 input for filtering]
[row 1 table data ] [row 1 table data ]
[row 2 table data ] [row 2 table data ]
... other rows
您可以看到示例Search through your table demo 我不想要在每一列都具有所有过滤功能的风格:
我想要这样:
[<input>for column1 only for filtering </input>]
[column1 table header title] [column2 table header title]
[row 1 table data ] [row 1 table data ]
[row 2 table data ] [row 2 table data ]
这也是一个文档,我目前正试图弄清楚如何使用:
/** * Add Filtering to your table. Here default text filtering on each column is assumed. */ filter: true,
/** * Adding Filtering to your table with more customization. * The dateFilter will have default functionality of a jQuery UI DatePicker. */ filter: { type: [ 'noFilter', 'numeric', 'text', 'dateFilter' ] }
/** * Adding Filtering to your table with some more customization. */ filter: { type: [
'noFilter',
{
/* Add a Drop-down list instead of a Textbox in the column header. */
type: 'select',
/* Options will be generated by the plugin by looking at the values of this column in the table. This will work only with Client-Side Pagination. */
generateOptions: true,
/* Filter this column numerically. */
filterType: 'numeric'
},
{
type: 'select',
/* You can provide hard-coded options for the select control. */
selectOptions: [ { name: 'option1', value: 'value1'}, { name: 'option2', value: 'value2'} ]
filterType: 'text'
},
{
/* Add a DatePicker(jQuery UI DatePicker) instead of a Textbox in the column header. */
type: 'dateFilter',
/* Optional. Specify options as you would specify for a jQuery UI DatePicker. These options will be supplied to the DatePicker while it is initialized.*/
options: {}
}
] }