@model BOL.HelperModel.ScrapSalesLintItemsViewModel
@using Microsoft.AspNet.Identity
@using BOL.HelperModel
@{
    ViewBag.Title = "LineItems";
    var controllerName = HttpContext.Current.Request.RequestContext.RouteData.Values["controller"].ToString();
    var area = HttpContext.Current.Request.RequestContext.RouteData.DataTokens["area"].ToString();
    int PageSize = BOL.HelperModel.GenericFunction.GetUserPageSize(User.Identity.GetUserId<int>());
    int Open = Companydetail.GetSDStatus();
    int InProcess = Companydetail.GetInProcess();
    int Approved = Companydetail.GetApproved();
}
<div class="modal-content modal-dialog div2" style="width:90%" id="div2@(ViewBag.Id)">
    <div id="alerts" style="position:fixed;left:2%;top:5%;z-index:100000000000000;width:30%;">
    </div>
    <div class="modal-content">

        <div class="col-md-12">
            <div class="panel with-nav-tabs panel-primary">
                <div class="panel-heading">
                    <h3>Invoice Detail</h3>
                </div>
                <div class="panel-body">
                    <div class="tab-content">
                        <div class="tab-pane fade in active" id="tab">

                            <div class="col-md-12" style="padding:0">
                                <div class="box box-danger">
                                    <div class="box-header">
                                        <h3 class="box-title">Invoice Detail</h3>
                                    </div>
                                    <div class="box-body">


                                        <div class="panel-content pagination2 table-responsive">
                                            <table id="tblScrapSalesLintItemsViewModel@(ViewBag.Id)" class="table table-striped table-bordered table-middle">
                                                <thead>
                                                    <tr>
                                                        <th style="width:2%;">Sr.No</th>


                                                        <th>
                                                            @Html.DisplayNameFor(model => model.CategoryName)
                                                        </th>
                                                        <th>
                                                            @Html.DisplayNameFor(model => model.SubCategoryName)
                                                        </th>
                                                        <th>
                                                            @Html.DisplayNameFor(model => model.ItemName)
                                                        </th>
                                                        <th>
                                                            @Html.DisplayNameFor(model => model.ItemCode)
                                                        </th>

                                                        <th>
                                                            @Html.DisplayNameFor(model => model.Comments)
                                                        </th>
                                                        <th>
                                                            @Html.DisplayNameFor(model => model.Qty)
                                                        </th>

                                                        <th>
                                                            @Html.DisplayNameFor(model => model.UnitPrice)
                                                        </th>
                                                        <th>
                                                            @Html.DisplayNameFor(model => model.TotalAmount)
                                                        </th>
                                                        <th>Action</th>
                                                    </tr>
                                                </thead>
                                                <tbody></tbody>
                                                <tfoot>
                                                    <tr>
                                                        <th class="total" colspan="8"><b>Total</b></th>
                                                        <th colspan="2">
                                                            <h3 class="text-right"> <b> Rs/- <span class="totalAmt">0.00</span></b></h3>
                                                        </th>

                                                    </tr>
                                                </tfoot>
                                            </table>

                                        </div>


                                    </div>


                                </div>
                            </div>
                        </div>

                    </div>
                </div>
            </div>
        </div>
    </div>
</div>



<script>
    var url = "/Sales/ScrapSales/ScrapLineItemsDataProviderAction/";
    $(document).ready(function(){
        init_table(@ViewBag.Id);
    });
    function init_table(ParentId)
    {
        if(ptable[ParentId] == null){
            ptable[ParentId] = getInstanceOfScrapSalesLintItemsViewModel();
        }
        else{
            ptable[ParentId].dataTable().fnDestroy();
            ptable[ParentId] = getInstanceOfScrapSalesLintItemsViewModel();
        }
    }
    function getInstanceOfScrapSalesLintItemsViewModel(ParentId) {

        $.fn.dataTableExt.oApi.fnPagingInfo = function (oSettings) {
            return {
                "iStart": oSettings._iDisplayStart,
                "iEnd": oSettings.fnDisplayEnd(),
                "iLength": oSettings._iDisplayLength,
                "iTotal": oSettings.fnRecordsTotal(),
                "iFilteredTotal": oSettings.fnRecordsDisplay(),
                "iPage": Math.ceil(oSettings._iDisplayStart / oSettings._iDisplayLength),
                "iTotalPages": Math.ceil(oSettings.fnRecordsDisplay() / oSettings._iDisplayLength)
            };
        };
        var arr = [];
        arr.push( { "data": null,})
        arr.push( { "data": "CategoryName","className": 'CategoryName'})
        arr.push( { "data": "SubCategoryName","className": 'SubCategoryName'})
        arr.push( { "data": "ItemName","className": 'ItemName'})
        arr.push( { "data": "ItemCode","className": 'ItemCode'})
        arr.push( { "data": "Comments","className": 'Comments'})
        arr.push( { "data": "Qty","className": 'Qty'})
        arr.push( { "data": "UnitPrice","className": 'UnitPrice'})
        arr.push( { "data": "TotalAmount","className": 'TotalAmount'})

        arr.push( { "data": null,"className": 'action'})
        return $("#tblScrapSalesLintItemsViewModel@(ViewBag.Id)").dataTable({
            "bServerSide": true,
            "iDisplayLength": @PageSize,
            "ordering": false,
            oLanguage: {
                sProcessing: ''
            },
            bProcessing: true,
            "sAjaxSource": url,
            "columns": arr,
            "ordering":false,
            "fnServerParams": function (aoData) {
                aoData.push({ "name": "page", "value": this.fnPagingInfo().iPage });
                aoData.push({ "name": "ScrapIDFK", "value": @ViewBag.Id });
            },
            "fnRowCallback": function (nRow, aData, iDisplayIndex, iDisplayIndexFull) {

                var id = aData.Id;
                var numStart = this.fnPagingInfo().iStart;
                var index = numStart + iDisplayIndexFull + 1;
                $("td:first",nRow).html(index);
                var isEven = index % 2;
                if (isEven == 0)
                    $(".Qty", nRow).html('<span class="btn btn-info btn-xs">' + aData.Qty + '</span>');
                else
                    $(".Qty", nRow).html('<span class="btn btn-success btn-xs">' + aData.Qty + '</span>');

                $(".UnitPrice",nRow).html(getCurrency(aData.UnitPrice));
                $(".TotalAmount",nRow).html(getCurrency(aData.TotalAmount))
                //$(".action",nRow).html("<a  href='javascript:void(0)' class='btn  btn-xs btn-warning' onclick='GetItemDetailItemByID(this," + id + ")'><i class='fa fa-edit'></i></a>");
                @*@if (ViewBag.StatusIDFK != Open)
                        {
                            <text>*@
                $('td:last', nRow).html('');
                //    </text>
                //}


            },
            "fnDrawCallback": function(settings) {
                init_numbers();
                init_numberkeyup();
                var response = this.api().ajax.json();
                $(".totalAmt").text(getCurrency(response.TotalAmount));
            },
            "footerCallback": function (row, data, start, end, display) {
            },
            "fnInitComplete": function (oSettings, json) {
            }
        }).on('processing.dt', function (e, settings, processing) {
            console.log("Processing Call")
            if (processing) {
                $("#div2@(ViewBag.Id) .overlay").attr('style', 'display:block;')
            } else {
                $("#div2@(ViewBag.Id) .overlay").attr('style', 'display:none;')
            }
        });

    }

</script>