jquery data table with check boxes using MVC

Press Me

With view model :

@model IEnumerable<WebApplication6.Models.EMP>

@{

    ViewBag.Title = "Index";

    Layout = null;

}

<h2>Index</h2>

<p>

    @Html.ActionLink("Create New", "Create")

</p>

<div style="border:solid 1px #000000; margin-top:2px">

    <br />

    <table class="table table-bordered table-condensed table-hover table-responsive table-striped" id="tb">

        <thead>

            <tr>

                <th><input name="select_all" value="0" id="example-select-all" type="checkbox" /></th>

                <th>

                    @Html.DisplayNameFor(model => model.EID)

                </th>

                <th>

                    @Html.DisplayNameFor(model => model.NAME)

                </th>

                <th>ACTION</th>

            </tr>

        </thead>

        <tbody>

            @foreach (var item in Model)

                <tr>

                    <td>

                        <input type="checkbox" style="width:15px;height:15px" class="cb" value="@item.EID" name="id[]" />

                    </td>

                    <td>

                        @Html.DisplayFor(modelItem => item.EID)

                    </td>

                    <td>

                        @Html.DisplayFor(modelItem => item.NAME)

                    </td>

                    <td>

                        @Html.ActionLink("Edit", "Edit", new { id = item.EID })  |

                        @Html.ActionLink("Delete", "Delete", new { id = item.EID })

                    </td>

                </tr>

            }

        </tbody>

    </table>

</div><br />

<input type="button" value="DeleteAll" id="btndel" />

<link rel="stylesheet" href="~/Content/bootstrap.css" />

<link rel="stylesheet" href="~/Content/Site.css" />

<link rel="stylesheet" href="~/Content/jquery.dataTables.css" />

<link rel="stylesheet" href="~/Content/jquery.dataTables_themeroller.css" />

<script type="text/javascript" src="~/Scripts/jquery-1.10.2.js"></script>

<script type="text/javascript" src="~/Scripts/jquery.dataTables.min.js"></script>

<script type="text/javascript">

    $(function () {

          var table = $("#tb").DataTable({

            "order": [[0, "asc"]],

            "lengthMenu": [[2, 10, 25, 50, -1], [2, 10, 25, 50, "All"]],

            "scroller": true,

            "orderClasses": false,

          })

          $('#example-select-all').on('click', function () {

              // Check/uncheck all checkboxes in the table

              var rows = table.rows({ 'search': 'applied' }).nodes();

              $('input[type="checkbox"]', rows).prop('checked', this.checked);

          });

          $('#tb tbody').on('change', 'input[type="checkbox"]', function () {

              // If checkbox is not checked

              if (!this.checked) {

                  var el = $('#example-select-all').get(0);

                  // If "Select all" control is checked and has 'indeterminate' property

                  if (el && el.checked && ('indeterminate' in el)) {

                      // Set visual state of "Select all" control

                      // as 'indeterminate'

                      el.indeterminate = true;

                  }

              }

          });

          var checkIds = [];

          $('#btndel').click(function () {

              table.$('input[type="checkbox"]').each(function () {

                      if (this.checked) {

                          checkIds.push((this.value));

                  }

              });

              alert(checkIds);

          });

    });

</script>

Without view model :



@{
    ViewBag.Title = "Index";
    Layout = null;
}

<h2>Index</h2>

<div style="border:solid 1px #000000; margin-top:2px">
    <br />
    <table class="table table-bordered table-condensed table-hover table-responsive table-striped" id="example">
        <thead>
            <tr>
                <th><input name="select_all" value="0" id="example-select-all" type="checkbox" /></th>

                <th>
                    EID
                </th>
                <th>
                    NAME
                </th>

            </tr>
        </thead>
        <tbody></tbody>
    </table>
</div>

<input type="button" value="DeleteAll" id="btndel" />
<link rel="stylesheet" href="~/Content/bootstrap.css" />
<link rel="stylesheet" href="~/Content/Site.css" />
<link rel="stylesheet" href="~/Content/jquery.dataTables.css" />
<link rel="stylesheet" href="~/Content/jquery.dataTables_themeroller.css" />
<script type="text/javascript" src="~/Scripts/jquery-1.10.2.js"></script>
<script type="text/javascript" src="~/Scripts/jquery.dataTables.min.js"></script>

<script type="text/javascript">
    $(function () {
        var table;
        $.ajax({
            "url": "@Url.Action("Gets", "Test")",
            type: 'Get',
            datatype: 'json',
            cache: false,
            success: function (Data) {
                table = $('#example').DataTable({
                    data: Data,
                    "pagingType": "full_numbers",
                    "lengthMenu": [[2, 10, 25, 50, -1], [2, 10, 25, 50, "All"]],
                    columns: [
                       {
                           data: "EID",
                           render: function (data, type, full, meta) {
                               return '<input type="checkbox" name="id[]" value="'
                                  + data + '">';
                           }
                       },
                        { data: "EID" },
                        { data: "NAME" }


                    ],
                    select: {
                        style: 'multi'
                    },
                    order: [[1, 'asc']]

                });
            }

        });


        // Handle click on "Select all" control
        $('#example-select-all').on('click', function () {
            // Check/uncheck all checkboxes in the table
            var rows = table.rows({ 'search': 'applied' }).nodes();
            $('input[type="checkbox"]', rows).prop('checked', this.checked);
        });

        $('#example tbody').on('change', 'input[type="checkbox"]', function () {
            // If checkbox is not checked
            if (!this.checked) {
                var el = $('#example-select-all').get(0);
                // If "Select all" control is checked and has 'indeterminate' property
                if (el && el.checked && ('indeterminate' in el)) {
                    // Set visual state of "Select all" control
                    // as 'indeterminate'
                    el.indeterminate = true;
                }
            }
        });

        var checkIds = [];
        $('#btndel').click(function () {
           
            table.$('input[type="checkbox"]').each(function () {
                if (this.checked) {
                    checkIds.push((this.value));
                }
            });

            alert(checkIds);


        });

    });


</script>