multi filter to apply only two columns Field1 and Field2

RAVI 1,056 Reputation points
2024-02-16T11:50:48.8733333+00:00

Hello This is my code

<html xmlns="http://www.w3.org/1999/xhtml"> <head> <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script> <link href="https://nightly.datatables.net/css/jquery.dataTables.css" rel="stylesheet" type="text/css" /> <script src="https://nightly.datatables.net/js/jquery.dataTables.js"></script> <!-- Select2 plugin --> <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css"/> <!-- Select2 plugin --> <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script> <meta charset="utf-8" /> <title>DataTables - JS Bin</title> <script> $(document).ready(function () { var table = $('#list').DataTable({ initComplete: function () { count = 0; this.api().columns().every(function () { var title = this.header(); //replace spaces with dashes title = $(title).html().replace(/[\W]/g, '-'); var column = this; var select = $('<select id="' + title + '" class="select2" style="width:100%;" ></select>') .appendTo($(column.header()).empty()) .on('change', function () { //Get the "text" property from each selected data //regex escape the value and store in array var data = $.map($(this).select2('data'), function (value, key) { return value.text ? '^' + $.fn.dataTable.util.escapeRegex(value.text) + '$' : null; }); //if no data selected use "" if (data.length === 0) { data = [""]; } //join array into string with regex or (|) var val = data.join('|'); //search for the option(s) selected column .search(val ? val : '', true, false) .draw(); }); column.data().unique().sort().each(function (d, j) { select.append('<option value="' + d + '">' + d + '</option>'); }); //use column title as selector and placeholder $('#' + title).select2({ multiple: true, closeOnSelect: false, placeholder: "Select a " + title }); //initially clear select otherwise first option is selected $('.select2').val(null).trigger('change'); }); } }); }); </script> <style> table { margin: 0 auto; margin-top: 20px; width: 100%; position: relative; overflow: auto; overflow-y: overlay; } th, thead { position: sticky; top: 0; border: 1px solid #dddddd; background-color: #1f2d54; text-align: center; table-layout: fixed; word-break: break-word; height: 45px; } </style> </head> <body> <div class="container"> <table cellspacing="0" class="myClass" id="list" style="width: 500px; font-family: Calibri; font-size: 11px; border-collapse: collapse; border: 1px solid black;"> <thead> <tr> <th>Field1</th> <th>Field2</th> <th>Field3</th> <th>Field4</th> </tr> </thead> <tbody style="border-collapse: collapse; border: 1px solid black;"> <asp:Repeater ID="Repeater1" runat="server"> <ItemTemplate> <tr> <td style="border-collapse: collapse; border: 1px solid black; font-size: larger;"><%#Eval("Field1")%></td> <td style="border-collapse: collapse; border: 1px solid black; font-size: larger;"><%#Eval("Field2")%></td> <td style="border-collapse: collapse; border: 1px solid black; font-size: larger;"><%#Eval("Field3")%></td> <td style="border-collapse: collapse; border: 1px solid black; font-size: larger;"><%#Eval("Field4")%></td> </tr> </ItemTemplate> </asp:Repeater> </tbody> </table> </div> </body> </html>
  1. I want to apply Field1 and Field2 column filter only not for all columns
  2. i want to Field4 total to be shown in footer whenever filter happens the total should be change accordingly Database data like this
   /****** Object: Table [dbo].[Table_1] Script Date: 11/30/2023 18:37:31 ******/ SET ANSI_NULLS ON GO SET QUOTED_IDENTIFIER ON GO SET ANSI_PADDING ON GO CREATE TABLE [dbo].[Table_1]( [ID] [int] IDENTITY(1,1) NOT NULL, [Field1] [varchar](50) NULL, [Field2] [varchar](50) NULL, [Field3] [varchar](50) NULL, [Field4] [float] NULL, CONSTRAINT [PK_Table_1] PRIMARY KEY CLUSTERED ( [ID] ASC )WITH (PAD_INDEX = OFF, STATISTICS_NORECOMPUTE = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS = ON, ALLOW_PAGE_LOCKS = ON) ON [PRIMARY] ) ON [PRIMARY] GO SET ANSI_PADDING OFF GO SET IDENTITY_INSERT [dbo].[Table_1] ON INSERT [dbo].[Table_1] ([ID], [Field1], [Field2], [Field3], [Field4]) VALUES (1, N'Apple', N'AA', N'BB', 100) INSERT [dbo].[Table_1] ([ID], [Field1], [Field2], [Field3], [Field4]) VALUES (2, N'Mango', N'AA', N'CC', 200) INSERT [dbo].[Table_1] ([ID], [Field1], [Field2], [Field3], [Field4]) VALUES (3, N'Orange', N'CC', N'DD', 50) INSERT [dbo].[Table_1] ([ID], [Field1], [Field2], [Field3], [Field4]) VALUES (4, N'Apple', N'CC', N'KK', 100) INSERT [dbo].[Table_1] ([ID], [Field1], [Field2], [Field3], [Field4]) VALUES (5, N'Mango', N'JJ', N'UP', 10) INSERT [dbo].[Table_1] ([ID], [Field1], [Field2], [Field3], [Field4]) VALUES (6, N'Mango', N'GG', N'EE', 90) INSERT [dbo].[Table_1] ([ID], [Field1], [Field2], [Field3], [Field4]) VALUES (7, N'Apple', N'AA', N'BB', 100) INSERT [dbo].[Table_1] ([ID], [Field1], [Field2], [Field3], [Field4]) VALUES (8, N'Mango', N'AA', N'C', 200) INSERT [dbo].[Table_1] ([ID], [Field1], [Field2], [Field3], [Field4]) VALUES (9, N'Orange', N'CC', N'T', 50) INSERT [dbo].[Table_1] ([ID], [Field1], [Field2], [Field3], [Field4]) VALUES (10, N'Apple', N'CC', N'R', 100) INSERT [dbo].[Table_1] ([ID], [Field1], [Field2], [Field3], [Field4]) VALUES (11, N'Mango', N'JJ', N'R', 10) INSERT [dbo].[Table_1] ([ID], [Field1], [Field2], [Field3], [Field4]) VALUES (12, N'Mango', N'GG', N'T', 90) SET IDENTITY_INSERT [dbo].[Table_1] OFF 
   
ASP.NET
ASP.NET
A set of technologies in the .NET Framework for building web applications and XML web services.
3,476 questions
0 comments No comments
{count} votes

Accepted answer
  1. Lan Huang-MSFT 29,251 Reputation points Microsoft Vendor
    2024-02-19T05:12:26.31+00:00

    Hi @RAVI,

    multi filter to apply only two columns Field1 and Field2

    Write examples based on your needs for your reference. Only two columns are needed to implement filtering, just define columns([0, 1]).

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title>Untitled Page</title>
        <script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
        <script type="text/javascript" src="https://cdn.datatables.net/1.13.7/js/jquery.dataTables.min.js"></script>
        <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.13.7/css/jquery.dataTables.min.css" />
        <script type="text/javascript">
            $(document).ready(function () {
                var rowCount = $('table#list tbody tr').length;
                sessionStorage.setItem("rowCount", rowCount);
                // Remove the formatting to get integer data for summation
                var intVal = function (i) {
                    return typeof i === 'string' ?
                        i.replace(/[\$,]/g, '') * 1 :
                        typeof i === 'number' ?
                            i : 0;
                };
                $('#list').DataTable({
                    initComplete: function () {
                        this.api().columns([0, 1]).every(function () {
                            var column = this;
                            var colTitle = this.header().innerHTML;
                            var select = $('<select><option value="">' + colTitle + '</option></select>')
                                .appendTo($(column.header()).empty())
                                .on('change', function () {
                                    var val = $.fn.dataTable.util.escapeRegex(
                                        $(this).val()
                                    );
                                    column
                                        .search(val ? '^' + val + '$' : '', true, false)
                                        .draw();
                                });
                            column.data().unique().sort().each(function (d, j) {
                                select.append('<option value="' + d + '">' + d + '</option>')
                            });
                        });
                    },
                    footerCallback: function (tfoot, data, start, end, display) {
                        let api = this.api();
                        api.column(2).footer().innerHTML = "Grand total";
                        // Total over all pages
                        total = api
                            .column(3, { search: 'applied' })
                            .data()
                            .reduce((a, b) => intVal(a) + intVal(b), 0);
                        // Update footer
                        api.column(3).footer().innerHTML = total;
                    }
                });
            });
        </script>
    </head>
    <body>
        <div class="container">
            <table cellspacing="0" class="myClass" id="list" style="width: 500px; font-family: Calibri; font-size: 11px; border-collapse: collapse; border: 1px solid black;">
                <thead>
                    <tr>
                        <th>Field1</th>
                        <th>Field2</th>
                        <th>Field3</th>
                        <th>Field4</th>
                    </tr>
                </thead>
                <tbody style="border-collapse: collapse; border: 1px solid black;">
                    <asp:Repeater ID="Repeater1" runat="server">
                        <ItemTemplate>
                            <tr>
                                <td style="border-collapse: collapse; border: 1px solid black; font-size: larger;"><%#Eval("Field1")%></td>
                                <td style="border-collapse: collapse; border: 1px solid black; font-size: larger;"><%#Eval("Field2")%></td>
                                <td style="border-collapse: collapse; border: 1px solid black; font-size: larger;"><%#Eval("Field3")%></td>
                                <td style="border-collapse: collapse; border: 1px solid black; font-size: larger;"><%#Eval("Field4")%></td>
                            </tr>
                        </ItemTemplate>
                    </asp:Repeater>
                </tbody>
                <tfoot>
                    <tr>
                        <td></td>
                        <td></td>
                        <td style="border-collapse: collapse; background: sandybrown; border: 1px solid black; font-size: larger; font-weight: bold;"></td>
                        <td style="border-collapse: collapse; background: sandybrown; border: 1px solid black; font-size: larger; font-weight: bold;"></td>
                    </tr>
                </tfoot>
            </table>
        </div>
    </body>
    </html>
    

    User's image

    Best regards,
    Lan Huang


    If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".
    Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.


0 additional answers

Sort by: Most helpful

Your answer

Answers can be marked as Accepted Answers by the question author, which helps users to know the answer solved the author's problem.