multi filter not working without postback

Question

multi filter not working without postback

RAVI 1,076

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

Lan Huang-MSFT 30,206 Reputation points Microsoft External Staff

2023-12-01T07:15:53.0933333+00:00

Hi @RAVI,

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

Your code will only work if there are no duplicates or if all duplicates need to be listed.

By default, your code checks all rows, so even with filtering, duplicate values that are not included in the checkbox will be rendered.

Also, the table rows start at 0, so the if (ind > 0) needs to be removed.

If you need to implement duplicate value filtering, I'd need to figure out your code logic and make a lot of changes, which will take some time. Until then, you can try other solutions.

Excel-like filter for HTML tables with JavaScript
RAVI 1,076 Reputation points

2023-12-01T07:25:04.5466667+00:00

Hello

Based On My code I need to filter like excel so if any other easy and best mehod using javascript without postback do sugesst me with complete code

thanks
Lan Huang-MSFT 30,206 Reputation points Microsoft External Staff

2023-12-07T03:35:10.06+00:00

Hi @RAVI,

We haven't heard any response from you yet.

Are there any updates on this issue? I am glad to help if you have any other questions.

1 answer

Your answer

Lan Huang-MSFT 30,206 Reputation points Microsoft External Staff

2023-12-01T07:15:53.0933333+00:00

Hi @RAVI,

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

Your code will only work if there are no duplicates or if all duplicates need to be listed.

By default, your code checks all rows, so even with filtering, duplicate values that are not included in the checkbox will be rendered.

Also, the table rows start at 0, so the if (ind > 0) needs to be removed.

If you need to implement duplicate value filtering, I'd need to figure out your code logic and make a lot of changes, which will take some time. Until then, you can try other solutions.

Excel-like filter for HTML tables with JavaScript
RAVI 1,076 Reputation points

2023-12-01T07:25:04.5466667+00:00

Hello

Based On My code I need to filter like excel so if any other easy and best mehod using javascript without postback do sugesst me with complete code

thanks
Lan Huang-MSFT 30,206 Reputation points Microsoft External Staff

2023-12-07T03:35:10.06+00:00

Hi @RAVI,

We haven't heard any response from you yet.

Are there any updates on this issue? I am glad to help if you have any other questions.

Answer 1

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>

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.

Share via

multi filter not working without postback

1 answer

Your answer