dataTables submit filtered on search

[NicoleStrain]

Hello

I have a table that is populated by using a for loop and contains text boxes that can be edited and the changes can be posted back to the server. It works fine unless I filter the table using the search bar which posts back to the model as null. Im assuming it is because I need to reinitialise the table with the filter values but im not sure how to do this while keeping it editable at the same time.

<table id="datatable-nic" class="table table-condensed no-footer datatable-basic-noPage">

<thead>
<tr>

<th>Description</th>
<th>Letter Type</th>
<th>Mail Type</th>
<th>Fold</th>
<th>Print Cost </th>
<th>Fulfilment Cost</th>
<th>Postage Cost</th>
</tr>
</thead>

<tbody id="myTable">

@for (int i = 0; i < Model.Count; i++)
{

<tr>


@Html.HiddenFor(m => Model.LetterType, new { @class = "form-control", @readonly = "readonly" })



<td class="exp" data-search='@Model.Description'>@Html.TextBoxFor(m => Model.Description, new { @class = "form-control", @readonly = "readonly" })</td>


<td data-search='@Model.LetterType'>@Html.TextBoxFor(m => Model.LetterType, new { @class = "form-control", @readonly = "readonly" })</td>


<td data-search='@Model.MailType'>@Html.TextBoxFor(m => Model.MailType, new { @class = "form-control", @readonly = "readonly" })</td>


<td data-search='@Model.Fold'>@Html.TextBoxFor(m => Model.Fold, new { @class = "form-control", @readonly = "readonly" })</td>


<td data-search='@Model.PrintCost'>@Html.TextBoxFor(m => Model.PrintCost, new { @class = "form-control", autocomplete = "off" })</td>


<td data-search='@Model.FulfilmentCost'>@Html.TextBoxFor(m => Model.FulfilmentCost, new { @class = "form-control", autocomplete = "off" })</td>


<td data-search='@Model.PostageCost'>@Html.TextBoxFor(m => Model.PostageCost, new { @class = "form-control", autocomplete = "off" })</td>

</tr>
}
</tbody>
</table>
</div>
<div>
<div class="col-md-12 col-sm-12">
<button type="submit" class="btn btn-success pull-right">class="fa fa-check"> Submit</button>
</div>
</div>


@section scripts{
<script src="~/Scripts/select2.min.js"></script>
<script src="~/Scripts/DataTables/datatables.min.js"></script>
}

Thanks for reading , any help is appreciated.

Continue reading...