How to have fixed table shape when searching [Answered]RSS

3 replies

Last post Nov 13, 2019 06:31 AM by Yongqing Yu

‹ Previous Thread|Next Thread ›

Shortcuts

JasonPhang

Member

5 Points

20 Posts

How to have fixed table shape when searching

Nov 09, 2019 06:30 PM|JasonPhang|LINK

I have a palceholder where i can search for the files in the Google Drive. The search works well but when i search for a certain file, the shape of the table becomes smaller and it looks not so nice. An example of what I meant is like this.

https://ibb.co/hXqyjkR

That is the table before i start searching. After i start searching, it looks like this:

https://ibb.co/1fG59fB.

I want the table headers to be fixed like the first link and whenever i search for it, the table layout remains the same. Just the data differs. This is my code for the table.

<script>
    function myFunction() {
        var input, filter, table, tr, td, cell, i, j;
        input = document.getElementById("myInput");
        filter = input.value.toUpperCase();
        table = document.getElementById("table");
        tr = table.getElementsByTagName("tr");
        for (i = 1; i < tr.length; i++) {
            // Hide the row initially.
            tr[i].style.display = "none";

            td = tr[i].getElementsByTagName("td");
            for (var j = 0; j < td.length; j++) {
                cell = tr[i].getElementsByTagName("td")[j];
                if (cell) {
                    if (cell.innerHTML.toUpperCase().indexOf(filter) > -1) {
                        tr[i].style.display = "";
                        break;
                    }
                }
            }
        }
    }

</script>

This is my code for the table.

  <table id="table" border="1">
        <tr class="header">
            <th>
                @Html.DisplayNameFor(model => model.Name)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.Size)
            </th>

            <th>
                @Html.DisplayNameFor(model => model.UploadedTime)
            </th>

            <th>
                @Html.DisplayNameFor(model => model.MD5hash)
            </th>

            <th>
                Download
            </th>
            <th>
                Delete
            </th>
        </tr>

        @if (Model.Count() > 0)
        {
            foreach (var item in Model)
            {
                <tr id="layouttable">
                    <td>
                        @Html.DisplayFor(modelItem => item.Name)
                    </td>

                    <td>
                        @{
                            long? KiloByte = @item.Size / 1024;
                            string NewSize = KiloByte + " KB";
                        }
                        @NewSize
                    </td>

                    <td>
                        @Html.DisplayFor(modelItem => item.CreatedTime)
                    </td>
                    <td>
                        @Html.DisplayFor(modelItem => item.MD5hash)
                    </td>

How can i make the main table header like fixed instead of changing everytime i search for something?

Yongqing Yu

Contributor

3660 Points

1042 Posts

Re: How to have fixed table shape when searching

Nov 11, 2019 02:54 AM|Yongqing Yu|LINK

Hi JasonPhang,

According to your description, if you want the column of your table to always be a fixed size, first you need to give your table a fixed width, or give the outer div of the table a fixed width, and set the percentage of the table width.

After you set the table width, you need to set the column width ratio for the th column of the table.

You can set the corresponding percentage according to your needs. The last column can be not set which be used to adapt, and ensure that the total column width ratio is less than 100%.

I have made an example based on your needs, you can follow this code:

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
    <script src="~/Scripts/jquery-3.3.1.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $(document).on('input', 'input:text', function () {
                var input, filter, table, tr, td, cell, i, j;
                input = document.getElementById("myInput");
                filter = input.value.toUpperCase();
                table = document.getElementById("table");
                tr = table.getElementsByTagName("tr");
                for (i = 1; i < tr.length; i++) {
                    // Hide the row initially.
                    tr[i].style.display = "none";
                    td = tr[i].getElementsByTagName("td");
                    for (var j = 0; j < td.length; j++) {
                        cell = tr[i].getElementsByTagName("td")[j];
                        if (cell) {
                            if (cell.innerHTML.toUpperCase().indexOf(filter) > -1) {
                                tr[i].style.display = "";
                                break;
                            }
                        }
                    }
                }

            })

        })
    </script>

</head>
<body>
    <div>
        <input id="myInput" type="text" /><br /><br />
        <div style="width:800px;background-color:antiquewhite">
            <table id="table" border="1" style="width:100%;border-collapse:collapse">
                <tr class="header">
                    <th style="width:20%">  @Html.DisplayNameFor(model => model.EmplId)</th>
                    <th style="width:50%">  @Html.DisplayNameFor(model => model.FirstName)</th>
                    <th>  @Html.DisplayNameFor(model => model.LastName)</th>
                </tr>
                @foreach (var item in Model)
                {
                    <tr id="layouttable">
                        <td>@Html.DisplayFor(model => item.EmplId)</td>
                        <td>@Html.DisplayFor(model => item.FirstName)</td>
                        <td>@Html.DisplayFor(model => item.LastName)</td>
                    </tr>
                }

            </table>
        </div>
    </div>
</body>
</html>

Here is the result of this work demo:

Best Regards,

YongQing.

MSDN Community Support

Please remember to click "Mark as Answer" the responses that resolved your issue.

If you have any compliments or complaints to MSDN Support, feel free to contact MSDNFSF@microsoft.com.

- Reply
JasonPhang
Member

5 Points

20 Posts

Re: How to have fixed table shape when searching

Nov 12, 2019 01:20 PM|JasonPhang|LINK

Your solution was the right answer but just one more question, how do I put the table in the center of the page? i tried position : center but it did not work.
- Reply
Yongqing Yu
Contributor

3660 Points

1042 Posts
Re: How to have fixed table shape when searching

Nov 13, 2019 06:31 AM|Yongqing Yu|LINK
Hi JasonPhang,

JasonPhang
Your solution was the right answer but just one more question, how do I put the table in the center of the page? i tried position : center but it did not work.

If you want to put your table in the middle of the page, you can add the following CSS style to your table：
```
html, body {
    width: 100%;
}
#table {
    margin: 0 auto;
}
```
You can refer to this link :

How to put table in the center of the page using CSS?

Best Regards,

YongQing.
MSDN Community Support

Please remember to click "Mark as Answer" the responses that resolved your issue.

If you have any compliments or complaints to MSDN Support, feel free to contact MSDNFSF@microsoft.com.

‹ Previous Thread|Next Thread ›