multi filter not working without postback

RAVI 1,056 Reputation points
2023-11-30T13:09:32.9233333+00:00

Hello

This is my aspx page

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %> 

<html>
<head runat="server">
     
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

    <script type="text/javascript">
 $(document).ready(function() {
  $("table th").click(function() {
    showFilterOption(this);
  });
});

var arrayMap = {};

function showFilterOption(tdObject) {
  var filterGrid = $(tdObject).find(".filter");

  if (filterGrid.is(":visible")) {
    filterGrid.hide();
    return;
  }

  $(".filter").hide();

  var index = 0;
  filterGrid.empty();
  var allSelected = true;
  filterGrid.append(
    '<div><input id="all" type="checkbox" style="width: 10% !important" checked>All</div>'
  );

  var $rows = $(tdObject).parents("table").find("tr");
  var values = [];

  $rows.each(function(ind, ele) {
    if (ind > 0) {
      var currentTd = $(ele).children()[$(tdObject).attr("index")];
      if (!values.includes(currentTd.innerHTML)) {
        values.push(currentTd.innerHTML);
        var div = document.createElement("div");
        div.classList.add("grid-item");
        var str = $(ele).is(":visible") ? "checked" : "";
        if ($(ele).is(":hidden")) {
          allSelected = false;
        }
        div.innerHTML =
          '<br><input type="checkbox" ' + str + " >" + currentTd.innerHTML;
        filterGrid.append(div);
        arrayMap[index] = ele;
        index++;
      }
    }
  });

  if (!allSelected) {
    filterGrid.find("#all").removeAttr("checked");
  }

  filterGrid.append(
    '<div style="text-align: center"><input id="ok" type="button" value="Ok" style="width: 20%"/><input id="close" type="button" value="Close" style="width: 20%"/></div>'
  );
  filterGrid.show();

  var $closeBtn = filterGrid.find("#close");
  var $okBtn = filterGrid.find("#ok");
  var $checkElems = filterGrid.find("input[type='checkbox']");
  var $gridItems = filterGrid.find(".grid-item");
  var $all = filterGrid.find("#all");

  $closeBtn.click(function() {
    filterGrid.hide();
    return false;
  });

  $okBtn.click(function() {
    filterGrid.find(".grid-item").each(function(ind, ele) {
      if ($(ele).find("input").is(":checked")) {
        $(arrayMap[ind]).show();
      } else {
        $(arrayMap[ind]).hide();
      }
    });
    filterGrid.hide();
    return false;
  });

  $checkElems.click(function(event) {
    event.stopPropagation();
  });

  $gridItems.click(function(event) {
    var chk = $(this).find("input[type='checkbox']");
    $(chk).prop("checked", !$(chk).is(":checked"));
  });

  $all.change(function() {
    var chked = $(this).is(":checked");
    filterGrid.find(".grid-item [type='checkbox']").prop("checked", chked);
  });

  filterGrid.click(function(event) {
    event.stopPropagation();
  });

  return filterGrid;
}
    </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;
  color: white;
  table-layout: fixed;
  word-break: break-word;
  height: 45px;
}

.filter {
  position: absolute;
  width: 10vw;
  height: 50vh;
  display: none;
  text-align: left;
  font-size: small;
  z-index: 9999;
  overflow: auto;
  background: #ffffff;
  color: #1f2d54;
  border: 1px solid #dddddd;
}

.filter input {
  margin: 5px !important;
  padding: 0 !important;
  width: 10%;
}
    
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    
     <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 index=0>Field1
      <div class="filter"></div>
    </th>
    <th index=0>Field2
      <div class="filter"></div>
    </th>
    <th index=0>Field3
      <div class="filter"></div>
    </th>
    <th index=0>Field4
      <div class="filter"></div>
    </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>
    </form>
</body>
</html>

This is my code file

using System;
using System.Data;
using System.Configuration;
using System.Collections;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
using System.Data.SqlClient;
using System.IO;
using System.Collections.Generic;
using System.Data;
using System.Data.SqlClient;
using System.Web.Services;
using System.Text;

public partial class _Default : System.Web.UI.Page
{

    protected void Page_Load(object sender, EventArgs e)
    {
        if (!Page.IsPostBack)
        {
            
            DataTable dt = new DataTable();
            SqlConnection con1 = new SqlConnection(ConfigurationManager.ConnectionStrings["CHEMIMSConnectionString"].ConnectionString);
            con1.Open();
            SqlCommand cmd1 = new SqlCommand("select * from Table_1 order by Field1 asc", con1);
            SqlDataAdapter ada1 = new SqlDataAdapter(cmd1);
            ada1.Fill(dt);
            Repeater1.DataSource = dt;
            Repeater1.DataBind();
            con1.Close();
            con1.Dispose();
        }
    }







}

This is sql data

 
/****** 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

On load it showing perfect
User's image

when i select Apple its not filtering whats the issue in my code please check

ASP.NET
ASP.NET
A set of technologies in the .NET Framework for building web applications and XML web services.
3,405 questions
{count} votes

1 answer

Sort by: Most helpful
  1. Lan Huang-MSFT 28,826 Reputation points Microsoft Vendor
    2023-12-01T09:18:00.33+00:00

    Hi @RAVI,

    Maybe you can use Select2 to select multiple options.

    Although the effects presented are different, the functions are the same.

    <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>
    
    

    6

    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 comments No comments