DataTable functionality doesn't work well with WebGrid in MVC

Sanjana31893

• The search functionality is limited to the current page
• It shows only one page containing 10 records (total no of records : 50)
• Multi-column search doesnt work or not even visible.

 <link rel="stylesheet" href="http://cdn.datatables.net/1.10.15/css/jquery.dataTables.min.css" />
<script src="~/Scripts/jquery-3.1.1.min.js"></script>
<script src="https://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js" type="text/javascript"></script>
<script src="https://cdn.datatables.net/1.10.15/js/dataTables.bootstrap.min.js" type="text/javascript"></script>

<script type="text/javascript">`
    $(document).ready(function () {
        var table = $('#webgrid').DataTable({
        "dom": "lfrti",         //to disable paging dropdown
        "bPaginate": false,     //to disable pagination
        "bInfo": false,         //to disable showing entries
        //"bFilter": false,     //to disable the global search
        });

        $('#webgrid tfoot th').each(function () {
            var title = $(this).text();
            $(this).html('<input type="text" placeholder="Search ' + title + '" />');
        });

        // Apply the search
        table.columns().every(function () {
            var that = this;

            $('input', this.footer()).on('keyup change', function () {
                if (that.search() !== this.value) {
                    that
                        .search(this.value)
                        .draw();
                }
            });
        });
    });
</script>

@using (Html.BeginForm("Persons", "Welcome", FormMethod.Get, new { @class = "Search-form", @id = "form1" }))
{
    <div id="DivGrid">
        @{
    var grid = new WebGrid(source: Model, canPage: true, rowsPerPage: 10,
            defaultSort: "Employee ID", columnNames: new[] { "Employee_ID", "First_Name", "Last_Name", "Date_Of_Birth" });
    //grid.SortDirection = SortDirection.Descending;
    if (Model.Count() > 0)
    {
            <div class="moveRight"><strong> @ViewBag.SearchParameter</strong> | @grid.TotalRowCount @Html.Label("Record(s) found")</div>

            @grid.GetHtml(tableStyle: "PGrid", headerStyle: "Header", alternatingRowStyle: "altRow", htmlAttributes: new { id = "webgrid" }, columns: grid.Columns(
                     grid.Column("Employee_ID", "Employee ID " + MyFormAppln.Models.helpers.SortDirection(null, ref grid, "Employee ID"),
                format: @<text>  <span class="display-mode grid-filter-btn">@item.Employee_ID </span>
                <label id="EmployeeID" class="edit-mode grid-filter-btn">@item.Employee_ID</label> </text>, style: "col2Width"),

                grid.Column("First_Name", "First Name " + MyFormAppln.Models.helpers.SortDirection(null, ref grid, "First_Name"), format: @<text>  <span class="display-mode">
                    <label id="lblFirstName">@item.First_Name</label>
                </span> <input type="text" id="FirstName" value="@item.First_Name" class="edit-mode" name="firstname" data-col="firstname" /></text>, style: "col2Width"),

                grid.Column("Last_Name", "Last Name " + MyFormAppln.Models.helpers.SortDirection(null, ref grid, "Last_Name"), format: @<text> <span class="display-mode">
                    <label id="lblLastName">@item.Last_Name</label>
                </span>  <input type="text" id="LastName" value="@item.Last_Name" class="edit-mode" name="lastname" data-col="lastname" /> </text>, style: "col2Width"),

                grid.Column("Date_Of_Birth", "Date Of Birth", format: item => ((item.Date_Of_Birth == null) ? "" : item.Date_Of_Birth.ToString("MM/dd/yyyy")), style: "DateOfBirth"),
                //grid.Column("Date_Of_Birth", "Date Of Birth", format: item => ((item.Date_Of_Birth == null) ? "" : item.Date_Of_Birth.ToString("MM/dd/yyyy")) ),
                grid.Column(header: "Action", canSort: false, style: "action", format: @<text>
                    <button class="edit-user display-mode glyphicon glyphicon-edit"> Edit</button>
                    <button class="display-mode delete-item glyphicon glyphicon-trash"> Delete</button>
                    <button class="save-user edit-mode glyphicon glyphicon-save"> Save</button>
                    <button class="cancel-user edit-mode glyphicon glyphicon-remove-sign"> Cancel</button></text>)));
    }
    else
    {
        <hr />@Html.Label("No, Record(s) not found")<<hr />
    }
        }
    </div>
}

allan

Can you link to a test page showing the issue please?

Allan