Wyszukiwarka w JavaScript z filtrami

pytanie zadane 20 listopada 2018 w JavaScript przez NeQ Początkujący (470 p.)

Cześć. Mam za zadanie na praktykach napisać wyszukiwarkę z filtrami (rosnąco id, malejąco id, alfabetycznie np. imie). Tabelke już zrobiłem, która tak się prezentuje w ASP.NET dam pod całym tekstem. Jak napisać w javascript wyszukiwarkę, która po wpisaniu w TextBoxie "Adrian" albo po wpisaniu jego kodu pocztowy wyświetli mi powiedzmy tylko Adriana Kowalskiego?
I jak napisać skrypt z tymi filtrami, że powiedzmy tabelka ustawiałaby się alfabetycznie od nazwiska.

[b]CAŁOŚĆ NA RAZIE WYGLĄDA TAK:[/b]

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

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox><asp:Button ID="Button1" runat="server" Text="Szukaj" /> 
            <br />
            <br />
            <asp:GridView ID="Tabeleczka" runat="server"></asp:GridView>
        </div>
    </form>
</body>
</html>

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data;

public partial class _Default : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {

        if (!Page.IsPostBack)
        {
            DataTable dt = new DataTable();

            dt.Columns.Add(new DataColumn("ID", typeof(int)));

            dt.Columns.Add(new DataColumn("Imie", typeof(string)));

            dt.Columns.Add(new DataColumn("Nazwisko", typeof(string)));

            dt.Columns.Add(new DataColumn("Adres", typeof(string)));

            dt.Columns.Add(new DataColumn("Kod pocztowy", typeof(string)));

            DataRow dr = dt.NewRow();

            dr["ID"] = 1;

            dr["Imie"] = "Adrian";

            dr["Nazwisko"] = "Kowalski";

            dr["Adres"] = "Zdrowa 1";

            dr["Kod pocztowy"] = "41-222";

            dt.Rows.Add(dr);

            DataRow dwr = dt.NewRow();

            dwr["ID"] = 2;

            dwr["Imie"] = "Antek";

            dwr["Nazwisko"] = "Nowak";

            dwr["Adres"] = "Kolorowa 22";

            dwr["Kod pocztowy"] = "32-555";

            dt.Rows.Add(dwr);

            Tabeleczka.DataSource = dt;

            Tabeleczka.DataBind();

        }

    }
}

2 odpowiedzi

odpowiedź 20 listopada 2018 przez sebeks Mądrala (5,300 p.)

C# nie znam. Najlepiej jakby JavaScript pobierał dane z serwera, np. w formacie json i generował widok całej tabeli lub jej części gdy używasz inputa do wyszukiwania. W innym wypadku będziesz musiał pobierać dane z tego widoku. Najlepiej chyba do tabeli, a potem za pomocą metod tablic np. filter() budować nową tablicę i wsadzić ją w tą tabelę podmieniając jej treść. Przyda się też znajomość wyrażeń regularnych. W JavaScript tablice są obiektami i niektóre metody tablic zmieniają ich zawartość, a inne zwracają nowe tablice, więc dobrze jest pracować na kopii tablicy.