How to reload datatable in jquery using mvc

Question

I have a function and get the response from the controller.after that I need to append the details to the table.All I have done.But i can see the result only after I click the table .I think my datatable is not reloaded.How Can I solve this problem.My code is below.and html code is added here.When the select box changes according to the result the table is updated

     $(document).on('change', '.MemberSelect', function () {

        $.ajax({
            type: "POST",
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            data: JSON.stringify({ memberTypeID: $(".MemberSelect").val() }),
            url: "@Url.Action("GetUserMenuDetails", "MenuPermission")",

            success: function (data) {
                var trHtml = '';
                $('#tblClassName tbody').empty();
                $.each(data, function (i, item) {

                    trHtml = trHtml + '<tr><td></td><td>' + (item.LibrarySchooberryMenuDetails!=null? item.LibrarySchooberryMenuDetails.MenuName : "") + '</td>'
                    '<td>' + item.MenuName + '</td>'
                    '<td><input type="checkbox" class="MenuMap" id="' + item.MenuID + '" data-id="' + item.MenuID + '"/></td>'
                    '<td><table>';
                    $.each(data.LibrarySchooberryMenuFunctions, function (j, functions) {
                        trHtml = trHtml + '<tr><td><input type="checkbox" class="FunctionMap" id="' + functions.MenuFunctionID + '"  data-id="' + functions.MenuFunctionID + '"/>'
                            + functions.Name + '<input type="hidden" value="' + functions.MenuID + '" class="menuID" /></td></tr>'

                    });
                    trHtml = trHtml + '</table></td></tr>'
                });

                $('#tblClassName').append(trHtml);
                $('#tblClassName').DataTable({
                    'paging': true,
                    'lengthChange': false,
                    'searching': true,
                    'ordering': true,
                    'info': true,
                    'autoWidth': false
                });

            },
            error: function (data) {            

            }
        });
   return false;
 });





  <div class="box-body">
                <form id="MenuPermission">


                    <div class="form-group">
                        <select class="form-control MemberSelect" name="MemberType"></select>
                    </div>

                    <div id="example1_wrapper" class="dataTables_wrapper form-inline dt-bootstrap">

                        <table class="table table-bordered table-striped" id="tblClassName">
                            <thead>
                                <tr>
                                    <th>Sl.NO
                                    </th>
                                    <th>Parent Menu
                                    </th>
                                    <th>Menu
                                    </th>
                                    <th>Is Allowed
                                    </th>
                                    <th>Function</th>

                                </tr>
                            </thead>
                            <tbody>
                                @{
                                    int i = 1;

                                    foreach (var item in Model)
                                    { 
                                    <tr>
                                        <td>@i
                                        </td>
                                        <td>
                                            @Html.DisplayFor(modelItem => item.LibrarySchooberryMenuDetails.MenuName)
                                        </td>
                                        <td>
                                            @Html.DisplayFor(modelItem => item.MenuName)
                                        </td>
                                        <td>
                                            <input type="checkbox" class="MenuMap" id="@item.MenuID" data-id="@item.MenuID"/>
                                        </td>
                                        <td>
                                            <table>
                                                @foreach (var function in item.LibrarySchooberryMenuFunctions)
                                                { 
                                                    <tr>
                                                        <td>
                                                            <input type="checkbox" class="FunctionMap" id="@function.MenuFunctionID"  data-id="@function.MenuFunctionID"/>
                                                            @function.Name
                                                            <input type="hidden" value="@function.MenuID" class="menuID" />
                                                        </td>

                                                    </tr>

                                                }
                                            </table>
                                        </td>

                                    </tr>


                                    }

                                }
                            </tbody>
                        </table>
                    </div>
                </form>
            </div>

Can you please post your HTML code also? For which HTML element is '.MemberSelect' class is assigned? — Gk_999
– Gk_999, Commented Oct 10, 2018 at 5:23
i added the html code.select element class name is '.MemberSelect' .Can you please help me — jasmin
– jasmin, Commented Oct 10, 2018 at 5:39
Yes.I adding another table inside the td because its a sub functions — jasmin
– jasmin, Commented Oct 10, 2018 at 5:52
Nothing can see after selecting the options from the select box.But if we just click the datatable we can see the result in datatable.Is that reload problem? — jasmin
– jasmin, Commented Oct 10, 2018 at 5:57

Jerdine Sabio · Accepted Answer · 2018-10-10 22:17:55Z

Refer to my answer here; How to append ajax result in modal with datatable

First store the initialization to a variable, be sure to put this on the top of the script or inside a $(document).ready(function(){});

var dataTable = $('#tblClassName').DataTable({});

Instead of using jquery append to the table, you have to use the .add() function from the datatable object, then .draw() for refresh;

dataTable.row.Add().draw();

UPDATE:

dataTable.row.add($(trHtml)).draw();

To clear the datatable, use .clear() .

dataTable.clear();

Use this script;

$(document).ready(function(){

  var dataTable = $('#tblClassName').DataTable({
  'paging': true,
  'lengthChange': false,
  'searching': true,
  'ordering': true,
   'info': true,
   'autoWidth': false
  });

});

$(document).on('change', '.MemberSelect', function () {
    $.ajax({
        type: "POST",
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        data: JSON.stringify({ memberTypeID: $(".MemberSelect").val() }),
        url: "@Url.Action("GetUserMenuDetails", "MenuPermission")",

        success: function (data) {
            var trHtml = '';

            // revised //////////////////////
            dataTable.clear();
            /////////////////////////////////

            $.each(data, function (i, item) {

                trHtml = trHtml + '<tr><td></td><td>' + (item.LibrarySchooberryMenuDetails!=null? item.LibrarySchooberryMenuDetails.MenuName : "") + '</td>'
                '<td>' + item.MenuName + '</td>'
                '<td><input type="checkbox" class="MenuMap" id="' + item.MenuID + '" data-id="' + item.MenuID + '"/></td>'
                '<td><table>';
                $.each(data.LibrarySchooberryMenuFunctions, function (j, functions) {
                    trHtml = trHtml + '<tr><td><input type="checkbox" class="FunctionMap" id="' + functions.MenuFunctionID + '"  data-id="' + functions.MenuFunctionID + '"/>'
                        + functions.Name + '<input type="hidden" value="' + functions.MenuID + '" class="menuID" /></td></tr>'

                });
                trHtml = trHtml + '</table></td></tr>'
            });

            // revised //////////////////////
            dataTable.row.add($(trHtml)).draw();
            /////////////////////////////////
        },
        error: function (data) {            

        }
    });
 return false;
});

@jasmin Did this answer the question? Do consider this as the answer

Collectives™ on Stack Overflow

How to reload datatable in jquery using mvc

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related