数据表多重过滤功能

Question

我在制作数据表多重过滤功能时遇到问题。 Idk 如何为显示数据设置 javascript 选择正确的标签。

我的多选 html 代码

<select class="selectpicker" name="MultiSelectGroup" multiple>
    <option id="gruop" >Group 1</option>
    <option id="gruop" >Group 2</option>
    <option id="gruop" >Group 3</option>
  </select>

多选的js代码

  $(function () {
    $('select').selectpicker();{
        $('input[name="MultiSelectGroup"]').on("click", function(){
            const selectedGroup = $(this).text(); //
    
            var url = '/api/test/data/get?='+ selectedGroup
            console.log('new URL'+url);
            table.ajax.url(url).load();
            table.ajax.reload();
           
        });
    }
    
});

我现在它还没有完成功能......但我知道该怎么做。 我从此链接获取数据表行的数据。

"ajax": "/api/test/data/get",

});

我的表格html代码

<div class="row-90">
        <table class="table display" id="calEvents">
            <thead>
               
                <tr>
                    <th scope="col" style="width: 1%;">ID</th>
                    <th scope="col" style="width: 8%;">GROUP</th>
                    <th scope="col" style="width: 1%;">WEEKDAY</th>
                    <th scope="col" style="width: 6%;">DATE</th>
                    <th scope="col" style="width: 10%">INFO</th>
                    <th scope="col" style="width: auto;">INFO 2</th>  
                    <th scope="col" style="width: 9%;">ACTION</th>
               
                </tr>
            </p>
            </thead>
            <tfoot>
                <tr>
                    <th scope="col">ID</th>
                    <th scope="col">GROUP</th>
                    <th scope="col">WEEKDAY</th>
                    <th scope="col">DATE</th>
                    <th scope="col">INFO</th>
                    <th scope="col">INFO 2</th>      
                    <th scope="col" >ACTION</th>
        
                   
                </tr>
            </tfoot>
        </table>
    </div>

我在 tadatable 中设置数据的 js 代码。

  var table = $('#calEvents').DataTable( {
        "processing": true, 
        "serverSide": false,

        "order": [[ 3, "asc" ]],
        "ajax": "/api/test/data/get",
        'columnDefs': [
         
            {
                
               targets: 2, render: function(data1){ return moment(data1).format('dddd')},
            },
            {
               targets: -1, defaultContent: '<button name="edit" class="btn btn-secondary btn-sm" style="font-size: 0.8em;" type="button">Edit</button>'
                 + '&nbsp <button name="delete" class="btn btn-danger btn-sm" style="font-size: 0.8em;" type="button">Delete</button>'
            },
            { targets: 3, render: function(data2){ return moment(data2).format('YYYY-MM-DD')}},
          
        ]
 
     
    } );

已更新，它是我的函数，从我选择日期到我的数据表

   @api.route('/data', methods=['GET'])
    @login_required
    def data_get():
        a = []
        if request.args.get('q'): 
            q = request.args.get('q')
            app.logger.debug(q)
            query = "SELECT groupName from dbo.CalGroups WHERE groupName like '%{0}%'".format(q)
            app.logger.debug(query)
            cursor.execute(query)
        else: cursor.execute("SELECT groupName from dbo.CalGroups")
        for row in cursor:
            a.append(row[0]) 
        app.logger.debug(a)
        return jsonify(a)

Answer 1

好的，您的代码有一些问题：

1. 您为所有option 标签使用了相同的id。这是错误的，因为id 旨在专门针对一个选择器，而不是多个选择器。在这种情况下，class='group' 将是更好的选择。
2. 您的option 标签需要一个值。该值应为组名/编号。所以，它将是<option class='group' value='group1'>Group 1</option>。
3. 在您的点击处理程序上，您应该检查点击目标并获取组的值：

$('input[name="MultiSelectGroup"]').on("click", function(){
    const selectedGroup = $(this).val(); // or $(this).text() for Group 1
    // now you can save this value as a global variable
   // or maybe send to backend server right away
});

4. 最后，您必须发送值。由于您使用的是 jquery，请查找如何执行此操作here on Jquery docs。

希望能帮助您的代码正常工作。一切顺利。