0

看到这个FIDDLE，但是我无法使用从原始 github 获得的外部 js。不知道为什么。https://raw.githubusercontent.com/kolgepratik/tableutils/master/js/tableutils.js

这里的问题是表的当前过滤看起来像这样：-->sample table：

     [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

您可以通过您的表格演示查看示例搜索 ，我不希望在每一列上都有所有过滤器功能的风格：

我想要这样：

     [<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: {}
           }
       ] }
4

0 回答 0