Click here to Skip to main content
15,878,430 members
Please Sign up or sign in to vote.
1.00/5 (1 vote)
I work on asp.net mvc page view . but I face issue search for every column not have same size of header

as Request No for search filter not same width and height of Request No column Header table

and if you check also Line Manager on header and search filter not same size exactly

so I need to make Request No or Linemanager or any column on search filter take full cell inside

so How to do that please ?



my code details as below :

What I have tried:

@model IEnumerable<HR.WorkforceRequisition.Models.ResignationRequester>

@{
    ViewBag.Title = "PayrollTeam";
    Layout = "~/Views/Shared/_LayoutResignation.cshtml";
    var color = "white";
}
<style>


    thead input {
        width: 100%;
        border: solid 1px;
    }

       tfoot input {
        width: 100%;
    }
</style>



    <table id="dtbl" class="table table-bordered table-hover table-striped" style="width:100%;padding-left:5px;
padding-right:7px;">
        <thead>
            <tr style="background-color: #f2f2f2;">

                <th style="border: 1px solid black;">
                    Request No
                </th>
                <th style="border: 1px solid black;">
                    Employee No
                </th>
                <th style="border: 1px solid black;">
                    Employee Name
                </th>
                <th style="border: 1px solid black;">
                    Request Date   
                </th>
               
            </tr>
        </thead>

        <tbody>
            @foreach (var item in Model)
            {
                <tr style="background-color: #f2f2f2;">

                    <td style="border: 1px solid black;">
                        @Html.DisplayFor(modelItem => item.RequestNo)
                    </td>
                    <td style="border: 1px solid black;">
                        @Html.DisplayFor(modelItem => item.EmpID)
                    </td>
                    <td style="border: 1px solid black;">
                        @Html.DisplayFor(modelItem => item.EmpName)
                    </td>
                    <td style="border: 1px solid black;">
                        @Html.DisplayFor(modelItem => item.ResignationSubmissionDate)
                    </td>
                    
            }
        </tbody>
        <tfoot>
            <tr>
                <th>Request No</th>
                <th>Employee No</th>
                <th>Employee Name</th>
                <th>Request Date</th>
           

            </tr>

        </tfoot>
    </table>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js" type="text/javascript"
        language="javascript"></script>

<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js" type="text/javascript"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js"></script>


<script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js"></script>





<script>
    $(document).ready(function () {
        $("#datepicker").datepicker();
        new DataTable('#dtbl', {
            "dom": 'rtip',
            "order": [[0, 'desc']],
            initComplete: function () {
                $('#dtbl tfoot tr').insertBefore($('#dtbl thead tr'))
                this.api()
                    .columns()
                    .every(function () {
                        let column = this;
                        let title = column.footer().textContent;
                        let input = document.createElement('input');
                        input.placeholder = title;
                        $(input).css("width", "100%"); // Set the input width to 100%

                        column.footer().innerHTML = ''; // Clear the footer cell
                        column.footer().replaceChildren(input);

                        
                        if (title === "Request Date") {
                            console.log("success request date")
                            $(this).html('<input type="text" id="datepicker" placeholder="Search ' + title + '" />');
                        }
                        else {
                            $(this).html('<input type="text" placeholder="Search ' + title + '" />');
                        }
                      
                        $(column.footer()).html(input);

                        input.addEventListener('keyup', () => {
                            if (column.search() !== this.value) {
                                column.search(input.value).draw();
                            }
                        });
                    });
            }
        });

    });

</script>
Posted

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900