search

anishcana / jovial

SpringAjaxModule
0 stars 0 forks source link

Jquery #4

Open anishcana opened 6 months ago

anishcana commented 6 months ago

<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %> <%@ page contentType="text/html;charset=UTF-8" language="java" %> <!DOCTYPE html>

JSON Data in Tabular Format
${entry.key}
${entry.value}

<!DOCTYPE html>

JSON Data in Tabular Format
anishcana commented 6 months ago

<!DOCTYPE html>

JSON Data in Tabular Format
anishcana commented 6 months ago

<!DOCTYPE html>

JSON Data in Tabular Format
anishcana commented 6 months ago
anishcana commented 6 months ago

Test

anishcana commented 6 months ago
anishcana commented 6 months ago

<!DOCTYPE html>

JSON Data in Tabular Format with Search
anishcana commented 6 months ago

<!DOCTYPE html>

JSON Data in Tabular Format with Search
anishcana commented 6 months ago 
            }
        });
    }

    // Function to populate the table with data
    function populateTable(data, searchText) {
        // Clear previous table content
        $("#headerRow").empty();
        $("#dataRows").empty();

        // Populate table header
        var headerRow = $("#headerRow");
        $.each(data[0], function(key, value) {
            headerRow.append("<th>" + key + "</th>");
        });

        // Populate table data
        var dataRows = $("#dataRows");
        $.each(data, function(index, obj) {
            var dataRow = $("<tr></tr>");
            $.each(obj, function(key, value) {
                var cellContent = String(value); // Convert value to string
                var highlightedText = cellContent;
                if (searchText && cellContent.toLowerCase().includes(searchText.toLowerCase())) {
                    // Highlight the searched text within the cell
                    var regex = new RegExp('(' + searchText + ')', 'ig');
                    highlightedText = cellContent.replace(regex, '<span class="highlight">$1</span>');
                }
                dataRow.append("<td>" + highlightedText + "</td>");
            });
            dataRows.append(dataRow);
        });
    }

    // Event listener for search input
    $("#searchInput").on("keyup", function() {
        var searchText = $(this).val();
        fetchData(searchText);
    });

    // Initially fetch data without search query
    fetchData('');
});
anishcana commented 6 months ago

table { width: 100%; border-collapse: collapse; } th, td { padding: 8px; text-align: left; border-bottom: 1px solid #ddd; } th { background-color: #f2f2f2; } .highlight { background-color: yellow; font-weight: bold; }