@{
    ViewBag.Title = "Index";
}

<h2>Index</h2>
<link href="~/Content/DataTables/css/jquery.dataTables.min.css" rel="stylesheet" />
<button class="btn btn-primary" id="importbtn">inport</button>
<table class="table" id="testtable">
    <thead>
        <tr>
            <th>
                Other1
            </th>
            <th>
                Other2
            </th>
        </tr>
    </thead>
</table>
@section scripts{
    <script src="~/Scripts/DataTables/jquery.dataTables.min.js"></script>
    <script>
        var table = $('#testtable').DataTable({
             ajax: {
                 url: "@Url.Action("getdata", "JqueryDatables")",
                 dataSrc: 'testdata'
             },
             columns: [
                 { data: "Other1" },
                 { data: "Other2" }
             ]
        });
        $("body").on("click", "#importbtn", function () {
            var testdata = [];
            $.each($('#testtable').find("tbody tr"), function (i, ele) {
                var tdata = $(ele).find("td");
                var obj = new Object();
                obj.Other1 = tdata[0].innerHTML;
                obj.Other2 = tdata[1].innerHTML;
                testdata.push(obj);
            });
            $.ajax({
                url: "@Url.Action("insert", "JqueryDatables")",
                contentType: 'application/json; charset=utf-8',
                dataType: 'json',
                data: JSON.stringify({ 'data': testdata }),
                type: "POST",
                success: function (data) {
                    if (data != "") {
                        alert(data);
                    } else {
                        alert("success");
                    }
                }
            });
        });
    </script>
}