Web Data Grid with filtering on all fields and full paging functionality

Web Data Grid with filtering on all fields and full paging functionality

(JQuery, Link.js)

I worked on it very hard whole day, hope you will enjoy and save your day :-)

VIEW (razor):

@model IEnumerable<Enigma.Models.Product>
 
@{
    ViewBag.Title = "CreateNewOrder";
    Layout = "~/Views/Shared/_LayoutCustomer.cshtml";
}
 
@Styles.Render("~/Content/Customer/CreateNewOrder.css")
 
 
<div id="searchArea"> 
    <input class='searchFields' id='searchX1' type='text'>
    <input class='searchFields' id='searchName' type='text'>
    <input class='searchFields' id='searchSize' type='text'>
    <input class='searchFields' id='searchPriceFrom' type='text'>
    <input class='searchFields' id='searchPriceTo' type='text'>
    <input class='searchFields' id='searchQuantityInPackage' type='text'>
    <input class='searchFields' id='searchSupplierName' type='text'>
</div>
 
<div id="mainDiv"></div>

<a id="PrevPage" href="#">Prev</a>

<a id="NextPage" href="#">Next</a>

<input type="submit" value="Create" />

@Html.ActionLink("Cancel Order", "CustomerIndex", "CustomerIndex")

JAVA SCRIPT OF GRID:

 
<script>
 
    var pagingIndexStep = 10;
    var origPagingIndexStep = 10;
    var globalPagingIndexMin = -origPagingIndexStep;
    var globalPagingIndexMax = 0;
    var model = @Html.Raw(Json.Encode(Model));    
    var modelSize = model.length;
    var origModel = model;
    var newModel = model;
    var reachedMaximum;
    var reachedMinimum;
    var pageNumber = 0;
    ShowNextPage(model);    
 
    function CutModelAccordingToIndex(model, startWith, endWith) {
        newModel = {};
        for (var i = startWith; i < endWith; i++) {
            newModel[i] = model[i];
        }
        
        return newModel;
    }
        
    function DrawGridByModel(newModel) {
        if (newModel.length == 0) return;
        var localModel = newModel;
        var html = "";       
        html += "<table class='productTable'>";
        html += "<thead class='tableThead'>";
        html += "<tr>";
        html += "<th>X1</th>";
        html += "<th>Name</th>";
        html += "<th>Size</th>";
        html += "<th>Price</th>";
        html += "<th>Quantity In Package</th>";
        html += "<th>Supplier Name</th>";
        html += "<th>Start Date</th>";
        html += "<th>End Date</th>";
        html += "<th>Add to Order</th>";
        html += "</tr>";
        html += "</thead>";
        html += "<tbody class='tableBody'>";
        html += "<tr>";        
        html += "<td></td>";
        html += "<td></td>";
        html += "<td></td>";
        html += "</tr>";
        $.each(localModel, function(key, value) {
            html += "<tr>";
            html += "<td class='x1_row'>" + value.x1 + "</td>";
            html += "<td class='name_row'>" + value.name + "</td>";
            html += "<td class='size_row'>" + value.size + "</td>";
            html += "<td class='price_row'>" + value.price + "</td>";
            html += "<td class='quantity_in_package_row'>" + value.quantity_in_package + "</td>";
            html += "<td class='supplier_name_row'>" + value.supplier_name + "</td>";
            html += "<td class='start_date_row'>" + value.period_start_date + "</td>";
            html += "<td class='end_date_row'>" + value.period_end_date + "</td>";
            html += "<td class='check_row'><input id='addToOrderButton' type='checkbox'></td>";
            html += "</tr>";
        });
        if (model.length > 0) {
            html += "<tr>";
            html += "<td class='total_pages'>Page: " + pageNumber +
                                           " From: " + Math.ceil(model.length / pagingIndexStep) + 
                                           " Total Results:" + model.length + "</td>";
            html += "</tr>";
        }
        html += "</tbody>";
        html += "</table>";
        $("#mainDiv").html(html);
        UpEvents();
    }
  
    $('#NextPage').click(ShowNextPage);
    $('#PrevPage').click(ShowPrevPage);        
    
    function ShowNextPage() {        
        var nextButton = $('#NextPage');
        var prevButton = $('#PrevPage');
        if (reachedMaximum || model.length == 0) return; 
        pageNumber++;
        globalPagingIndexMin += pagingIndexStep;
        globalPagingIndexMax += pagingIndexStep;
        if (globalPagingIndexMax >= modelSize) {
            newModel = CutModelAccordingToIndex(model, globalPagingIndexMin, modelSize);
            DrawGridByModel(newModel);
            nextButton.addClass("prevNextButtonsDisabled");           
            reachedMaximum = true;
        } else {
            newModel = CutModelAccordingToIndex(model, globalPagingIndexMin, globalPagingIndexMax);
            DrawGridByModel(newModel);           
            reachedMaximum = false;
        }                
        prevButton.addClass("prevNextButtonsEnabled");
        reachedMinimum = false;
       
    }
    
    function ShowPrevPage() {
        var nextButton = $('#NextPage');
        var prevButton = $('#PrevPage');
        if (reachedMinimum || (globalPagingIndexMin - pagingIndexStep) < 0 || model.length == 0) return;
        pageNumber--;
        globalPagingIndexMin -= pagingIndexStep;
        globalPagingIndexMax -= pagingIndexStep;
        if (globalPagingIndexMin < 1) {
            newModel = CutModelAccordingToIndex(model, globalPagingIndexMin, globalPagingIndexMax);
            DrawGridByModel(newModel);
            prevButton.addClass("prevNextButtonsDisabled");          
            reachedMinimum = true;
        } else {
            newModel = CutModelAccordingToIndex(model, globalPagingIndexMin, globalPagingIndexMax);
            DrawGridByModel(newModel);              
        } 
        reachedMaximum = false;
        nextButton.addClass("prevNextButtonsEnabled");
        
    }      
    
    function CreateNewModelAccordingToCrteria()
    {
        var queryResult;
        var searchByX1Val = $('#searchX1').val();
        var searchName = $('#searchName').val();
        var searchSize = $('#searchSize').val();        
     
        queryResult = origModel;
        if (searchByX1Val && searchByX1Val.length > 0) {          
            queryResult = Enumerable.From(queryResult)
                   .Where(" x => x['x1']== " + searchByX1Val).ToArray(); 
        }        
        if (searchName && searchName.length > 0) {                       
            queryResult = Enumerable.From(queryResult)
                   .Where("x => x['name']== '" + searchName + "'").ToArray(); 
        }               
        if (searchSize && searchSize.length > 0) {                       
            queryResult = Enumerable.From(queryResult)
                   .Where("x => x['size']== '" + searchSize + "'").ToArray(); 
        }  
        
        model = queryResult;  
        pagingIndexStep = model.length > origPagingIndexStep ? origPagingIndexStep : model.length;
       
        globalPagingIndexMin = -pagingIndexStep;
        globalPagingIndexMax = 0;
        pageNumber = 0;
        modelSize = model.length;
        reachedMaximum = false;
        reachedMinimum = false;        
        ShowNextPage();
    }       
 
    function AddProductToOrder() {
        if($(this).attr('checked')) {
            
            alert($(this).parent().parent()[0].cells[0].innerText);
        } else {
            alert('REMOVED');
        }
    }
 
    function UpEvents(){
        $(".check_row input[type=checkbox]").click(AddProductToOrder);
    }
   
    $('#searchX1').keyup(CreateNewModelAccordingToCrteria);
    $('#searchName').keyup(CreateNewModelAccordingToCrteria);  
    $('#searchSize').keyup(CreateNewModelAccordingToCrteria);  
    
</script>