Using datatables to search table Asp.net MVC

Question

I'm using datatables in order to search a table however when add another table row datatables doesn't an I realized in researching I have to same amount of rows and columns. What I would like to know is there a way I could get around; because I would love to use it but I need to include that table row. This is what I have.

Javascript

    <script type="text/javascript">

    $(document).ready(function () {
        $('#data').DataTable();
    });

</script>

Form

    <h2>Transaction List</h2>
@using (Html.BeginForm())
{
    @Html.AntiForgeryToken()

    <div>
        <h4>Transaction List Details</h4>
        <div style="text-align:right">
            @Html.ActionLink("Posted Items Report", "TransactionListRpt", "Post")
            <input id="Print" type="button" value="Print Approved List" name="Print" class="btn-link"/>
        </div>
        <hr />


        <table id="data" >

            <thead>
           @Html.CheckBox("TheOneCheckBoxToRuleThemAll")Select All
                <tr>

                    <th class="col-lg-3 ">Expense Account</th>
                    <th class="col-lg-3 ">Item Number</th>
                    <th class="col-sm-1">Quantity</th>
                    <th class="col-sm-1 ">UOM</th>
                    <th class="col-sm-1 ">Cost</th>
                    <th class="col-sm-1 ">Extended Cost</th>

                    <th></th>
                </tr>
            </thead>
            <tbody>
    @for (int i = 0; i < Model.Count; i++)
    {
        @Html.HiddenFor(m => m[i].requisitionNumber)
        @Html.HiddenFor(m => m[i].inventory_acccount)
        @Html.HiddenFor(m => m[i].department)
        @Html.HiddenFor(m => m[i].docNumber)
        @Html.HiddenFor(m => m[i].docType)

        <tr>
            <td>@Html.CheckBoxFor(m => m[i].postTrnx, new { @class = "checkGroup1" })</td>
            <td class="label">
                @Html.DisplayFor(m => m[i].requisitionNumber)
            @Html.DisplayFor(m => m[i].transactionDate)
            @Html.DisplayFor(m => m[i].docType)
        </td>
    </tr>
        foreach (var item in Model[i].items)
        {
                    @Html.HiddenFor(m => item.description)
                    @Html.HiddenFor(m => item.expense_account)
                    @Html.HiddenFor(m => item.itemNumber)
                    <tr>

                        <td class="col-lg-3 tabledata">@item.expense_account.account_desc</td>
                        <td class="col-lg-3 tabledata">@item.itemNumber</td>
                        <td class="col-sm-1 tabledata">@item.quantity</td>
                        <td class="col-sm-1 tabledata">@item.selecteduomtext </td>
                        <td class="col-sm-1 tabledata">@item.price</td>
                        <td class="col-sm-1 tabledata">@item.extended_cost</td>
                        <td>@Html.ActionLink("Edit", "Edit", new { id = @item.lineNum, name = Model[i].docNumber })</td>
                    </tr>

                  }

                    }
</tbody>
        </table>
        <br /><br /><br />
    </div>

       <div>

<input type="submit" value="Post" name="Approve" class="btn btn-primary btn-lg" onclick="return confirm('Click OK to continue or Cancel to abort');" />&nbsp;&nbsp;&nbsp;&nbsp;
        @*<input type="button" value="View Posted Transactions" class="btn btn-primary btn-lg" onclick="location.href='@Url.Action("TransactionListRpt","Post")'"/>*@
    </div>


}

DataTables is very strict regarding HTML. First, make sure you have @Html.CheckBox("TheOneCheckBoxToRuleThemAll")Select All inside <th>. — Roman K.
– Roman K., Commented Nov 14, 2017 at 12:58
<tr> <td>@Html.CheckBoxFor(m => m[i].postTrnx, new { @class = "checkGroup1" })</td> <td class="label"> @Html.DisplayFor(m => m[i].requisitionNumber) @Html.DisplayFor(m => m[i].transactionDate) @Html.DisplayFor(m => m[i].docType) </td> </tr> but this would be the problem; and i tried to add them to the table then I get an error based on the store procedure — user8862084
– user8862084, Commented Nov 14, 2017 at 14:11
The problem I was referring to is in table head. You need to put the first checkbox in thead: <thead><tr><th>@Html.CheckBox("TheOneCheckBoxToRuleThemAll")Select All</th> .... It's may not be the issue here, but I've had problems with DataTables and wrong HTML before. — Roman K.
– Roman K., Commented Nov 14, 2017 at 15:00

Vaibhav shetty · Accepted Answer · 2017-11-14 11:46:03Z

0

You can call just like this, to enable searching

$('#data').dataTable({
        "searching": true
    });

answered Nov 14, 2017 at 11:46

Vaibhav shetty

3721 gold badge4 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Vaibhav shetty Over a year ago

This may also help you stackoverflow.com/questions/29150480/…

Shiffty Over a year ago

Searching is true by default and since the OP is using the default initializer this answer won't help him much.

Collectives™ on Stack Overflow

Using datatables to search table Asp.net MVC

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related