How to get data usiing javascript in MVC and wheel scrol time get 50 record

Question

1.00/5 (1 vote)

See more:

function bindMemberList() {
    $("#loading").show();
    var from = '01/01/1900';
    var to = '01/01/1900';
    $.ajax({
        type: "Get",
        cache: false,
        url: "/Member/GetMemberData",
        data: { 'pageIndex': $('#NewPageIndex').val(), 'PageSize': $('#PageSize').val(), 'SearchFirstName': '', 'SearchLastName': '', 'Clientid': '', 'Barcode': '', 'hasEmail': '0', 'hasContract': '0', 'hasAccountNo': '0', 'hasPolicyNo': '0', 'hasGroupNo': '0', 'From': from, 'To': to, clublocationid: '0', clublocationName: '', insuranceid: '0', MemberStatus: '0', Sort: 'order by Memberlastname asc', IsVerified: '0' },
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        async: false,
        success: function (response) {
            var curRecords = 0;
            var TotalRecs = 0;
            if (parseInt(response.length) > 0)
            {
                curRecords = parseInt(($('#NewPageIndex').val()) * parseInt($('#PageSize').val()));
                curRecords = curRecords - (50 - parseInt(response.length));
                TotalRecs = parseInt(response[0].TotalRecords);
                $('.FooterRecordCount').show();
            }
            else
            {
                $('.FooterRecordCount').hide();
            }
            $('.RecordCountSpan').text(curRecords);
            $('.TotalCountSpan').text(TotalRecs);

            if (parseInt(response.length) > 0) {
                if (parseInt(($('#NewPageIndex').val()) * parseInt($('#PageSize').val())) > parseInt(response[0].TotalRecords)) {
                    $("#ddlload").hide();
                } else {
                    $("#ddlload").show();
                }
            } else {
                $("#ddlload").hide();
            }
            $("#RawDatas table tbody tr:not(:first)").remove();
            $("#RawDatas table tbody tr:eq(0)").show();
            for (var i = 0; i < response.length; i++) {
                var table = $("#RawDatas table tbody tr:eq(0)").clone(true);
                $(".memname", table).html(response[i].Memberlastname + ', ' + response[i].Memberfirstname);
                $(".email", table).html(response[i].Memberemailid);
                $(".clubname", table).html(response[i].ClublocationidDesc);
                $(".insname", table).html(response[i].InsurancecompanyidDesc);
                $('.memberstatus', table).html(response[i].MemberStatusDesc);
                $("#editdata", table).attr('href', '/Member/Edit?Memberid=' + response[i].Memberid);
                $('#Deletedata', table).attr('href', '/Member/DeleteSadmin?Memberid=' + response[i].Memberid);
                $("#RawDatas table").append(table);
            }
            $("#RawDatas table tbody tr:eq(0)").hide();
            $("#loading").hide();
        },
        failure: function (response) {
        },
        error: function (response) {
        }
    });
}

What I have tried:

How to get data usiing javascript in mvc and wheel scrol time get 50 record

Posted 11-Feb-19 19:15pm

Member 14146669

Updated 11-Feb-19 19:18pm

Add a Solution

Comments

Member 11882351 12-Feb-19 1:24am

public ActionResult PrakashIndex(string BackFor = "")
{
TempData["BackFor"] = BackFor;
return View();
}

Member 11882351 12-Feb-19 1:24am

public JsonResult GetMemberData(int pageIndex, int PageSize, string SearchFirstName, string SearchLastName, string Clientid, string Barcode, string hasEmail, string hasContract, string hasAccountNo, string hasPolicyNo, string hasGroupNo, string From, string To, string clublocationid, string clublocationName, string insuranceid, string MemberStatus, string Sort, string IsVerified)
{
TempData["MemberSearch"] = SearchFirstName;
TempData["MemberLastName"] = SearchLastName;
TempData["Clientid"] = Clientid;
TempData["Barcode"] = Barcode;
TempData["hasEmail"] = hasEmail;
TempData["hasContract"] = hasContract;
TempData["hasAccountNo"] = hasAccountNo;
TempData["hasPolicyNo"] = hasPolicyNo;
TempData["hasGroupNo"] = hasGroupNo;
TempData["Memberclublocationid"] = clublocationid.ToString();
TempData["MemberclublocationName"] = clublocationName.ToString();
TempData["Memberinsuranceid"] = insuranceid.ToString();
TempData["FromDate"] = From.ToString();
TempData["ToDate"] = To.ToString();
TempData["MemberStatus"] = MemberStatus;
TempData["IsVerified"] = IsVerified;
TempData["PageIndex"] = pageIndex;
if (OBMI.GlobalModels.GlobalUtils.UserRole == "Club Manager")
{
clublocationid = OBMI.GlobalModels.GlobalUtils.UserClubLocationId;
}
Int32 totalREcs = 0;
using (MemberCtl db = new MemberCtl())
{
totalREcs = db.GetMemberDataCount(pageIndex, PageSize, SearchFirstName, SearchLastName, Clientid, Barcode, hasEmail, hasContract, hasAccountNo, hasPolicyNo, hasGroupNo, From, To, Convert.ToInt32(clublocationid), Convert.ToInt32(insuranceid), Convert.ToInt32(MemberStatus), Sort, IsVerified);
}
using (MemberCtl db = new MemberCtl())
{
return Json(db.GetMemberData(pageIndex, PageSize, SearchFirstName, SearchLastName, Clientid, Barcode, hasEmail, hasContract, hasAccountNo, hasPolicyNo, hasGroupNo, From, To, Convert.ToInt32(clublocationid), Convert.ToInt32(insuranceid), Convert.ToInt32(MemberStatus), Sort, IsVerified, totalREcs), JsonRequestBehavior.AllowGet);
}
}

2 solutions

Please Sign up or sign in to vote.

Solution 2

Accept Solution Reject Solution

@{
string BackFortd = Convert.ToString(TempData["BackFor"]);
}

$(document).ready(function () {
$("#ddlload").hide();
$('#loading').show();
$('#NewPageIndex').val('1');
bindMemberList();
});
function bindMemberList() {
$("#loading").show();
var from = '01/01/1900';
var to = '01/01/1900';
$.ajax({
type: "Get",
cache: false,
url: "/Member/GetMemberData",
data: { 'pageIndex': $('#NewPageIndex').val(), 'PageSize': $('#PageSize').val(), 'SearchFirstName': '', 'SearchLastName': '', 'Clientid': '', 'Barcode': '', 'hasEmail': '0', 'hasContract': '0', 'hasAccountNo': '0', 'hasPolicyNo': '0', 'hasGroupNo': '0', 'From': from, 'To': to, clublocationid: '0', clublocationName: '', insuranceid: '0', MemberStatus: '0', Sort: 'order by Memberlastname asc', IsVerified: '0' },
contentType: "application/json; charset=utf-8",
dataType: "json",
async: false,
success: function (response) {
var curRecords = 0;
var TotalRecs = 0;
if (parseInt(response.length) > 0)
{
curRecords = parseInt(($('#NewPageIndex').val()) * parseInt($('#PageSize').val()));
curRecords = curRecords - (50 - parseInt(response.length));
TotalRecs = parseInt(response[0].TotalRecords);
$('.FooterRecordCount').show();
}
else
{
$('.FooterRecordCount').hide();
}
$('.RecordCountSpan').text(curRecords);
$('.TotalCountSpan').text(TotalRecs);

if (parseInt(response.length) > 0) {
if (parseInt(($('#NewPageIndex').val()) * parseInt($('#PageSize').val())) > parseInt(response[0].TotalRecords)) {
$("#ddlload").hide();
} else {
$("#ddlload").show();
}
} else {
$("#ddlload").hide();
}
$("#RawDatas table tbody tr:not(:first)").remove();
$("#RawDatas table tbody tr:eq(0)").show();
for (var i = 0; i 0) {
curRecords = parseInt(($('#NewPageIndex').val()) * parseInt($('#PageSize').val()));
curRecords = curRecords - (50 - parseInt(response.length));
TotalRecs = parseInt(response[0].TotalRecords);
$('.FooterRecordCount').show();
}
else {
$('.FooterRecordCount').hide();
}
$('.RecordCountSpan').text(curRecords);
$('.TotalCountSpan').text(TotalRecs);
if (parseInt(response.length) > 0) {
if (parseInt(($('#NewPageIndex').val()) * parseInt($('#PageSize').val())) > parseInt(response[0].TotalRecords)) {
$("#ddlload").hide();
} else {
$("#ddlload").show();
}
} else {
$("#ddlload").hide();
}
if (response.length > 0) {
$('#RawDatas table').show();
$("#RawDatas table tbody tr:not(:first)").remove();
$("#RawDatas table tbody tr:eq(0)").show();
for (var i = 0; i
@{

0
out of

0

records

Name

Email Address

@if (OBMI.GlobalModels.GlobalUtils.UserRole != "Club Manager")
{

Club

}

Insurance Company

Member Status

Action

@if (OBMI.GlobalModels.GlobalUtils.UserRole != "Club Manager")
{

}

@* *@

Load more
@Html.Hidden("hdnload", 0)

0 out of 0 records

Previous

Next

10
20
50
100

Records/Page

}

$(function () {
});
function Getdata() {
$("#loading1").show();
$("#hdnload").val("1");
$("#ddlload").hide();
GetRecords();
}
$(window).on('mousewheel DOMMouseScroll', function (e) {
var scroll = $(window).scrollTop();
var direction = (function () {
var delta = (e.type === 'DOMMouseScroll' ? e.originalEvent.detail * -40 : e.originalEvent.wheelDelta);
return delta > 0 ? 0 : 1;
}());
if (direction === 1) {
var maxVal = parseInt((parseInt($(document).height()) * 95) / 100);
var lowVal = $(window).scrollTop() + $(window).height();
if (lowVal >= maxVal) {
//alert("page down!");
if ($("#NewPageIndex").val() != "1" && $("#loading1").css('display') == 'none') {
// console.log('Scroll down' + $('#NewPageIndex').val());
$("#ddlload").hide();
GetRecords();
}
}
}
});
function GetRecords() {
var CountVal = (parseInt($('#NewPageIndex').val()) + 1);
$('#NewPageIndex').val(CountVal);
$("#loading1").show();
var from = '01/01/1900';
var to = '01/01/1900';
$.ajax({
type: "Get",
cache: false,
url: "/Member/GetMemberData",
data: { 'pageIndex': $('#NewPageIndex').val(), 'PageSize': $('#PageSize').val(), 'SearchFirstName': '', 'SearchLastName': '', 'Clientid': '', 'Barcode': '', 'hasEmail': '0', 'hasContract': '0', 'hasAccountNo': '0', 'hasPolicyNo': '0', 'hasGroupNo': '0', 'From': from, 'To': to, clublocationid: '0', clublocationName: '', insuranceid: '0', MemberStatus: '0', Sort: 'order by Memberlastname asc', IsVerified: '0' },
contentType: "application/json; charset=utf-8",
dataType: "json",
async: false,
success: OnSuccess,
failure: function (response) {
//alert(response.d);
},
error: function (response) {
//alert(response.d);
}
});
}

function OnSuccess(response) {
var curRecords = 0;
var TotalRecs = 0;
if (parseInt(response.length) > 0)
{
curRecords = parseInt(($('#NewPageIndex').val()) * parseInt($('#PageSize').val()));
curRecords = curRecords - (50 - parseInt(response.length));
TotalRecs = parseInt(response[0].TotalRecords);
$('.RecordCountSpan').text(curRecords);
$('.FooterRecordCount').show();
$('.TotalCountSpan').text(TotalRecs);
}
if (parseInt(response.length) > 0)
{
if (parseInt(($('#NewPageIndex').val()) * parseInt($('#PageSize').val())) > parseInt(response[0].TotalRecords)) {
$("#ddlload").hide();
} else {
$("#ddlload").show();
}
}
else
{
$("#ddlload").hide();
}
if (response.length > 0)
{
$("#RawDatas table tbody tr:eq(0)").show();
for (var i = 0; i

Permalink

Share this answer

Posted 11-Feb-19 19:18pm
Member 11882351

Add a Solution

Add your solution here

Plain Text
ASM
ASP
ASP.NET
BASIC
BAT
C#
C++
COBOL
CoffeeScript
CSS
Dart
dbase
F#
FORTRAN
HTML
Java
Javascript
Kotlin
Lua
MIDL
MSIL
ObjectiveC
Pascal
PERL
PHP
PowerShell
Python
Razor
Ruby
Scala
Shell
SLN
SQL
Swift
T4
Terminal
TypeScript
VB
VBScript
XML
YAML

OKPaste as

Strip HTML
Encode HTML
Paste as-is
Code block
Quoted Text
Best guess

To display as

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email

Password

Forgot your password?

Your Email

This email is in use. Do you need your password?

Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

Submit your solution

When answering a question please:

Read the question carefully.

Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.

If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.

Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.
Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Member 11882351 · Accepted Answer · 2019-02-11T19:18:00

<script src="~/Scripts/jquery1.8.3.min.js"></script>
<script src="~/Scripts/jquery-1.js"></script>
@{   
    string BackFortd = Convert.ToString(TempData["BackFor"]);
}
<script>
    $(document).ready(function () {
        $("#ddlload").hide();
        $('#loading').show();       
        $('#NewPageIndex').val('1');
        bindMemberList();
    });
    function bindMemberList() {
        $("#loading").show();
        var from = '01/01/1900';
        var to = '01/01/1900';       
        $.ajax({
            type: "Get",
            cache: false,
            url: "/Member/GetMemberData",
            data: { 'pageIndex': $('#NewPageIndex').val(), 'PageSize': $('#PageSize').val(), 'SearchFirstName': '', 'SearchLastName': '', 'Clientid': '', 'Barcode': '', 'hasEmail': '0', 'hasContract': '0', 'hasAccountNo': '0', 'hasPolicyNo': '0', 'hasGroupNo': '0', 'From': from, 'To': to, clublocationid: '0', clublocationName: '', insuranceid: '0', MemberStatus: '0', Sort: 'order by Memberlastname asc', IsVerified: '0' },
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            async: false,
            success: function (response) {
                var curRecords = 0;
                var TotalRecs = 0;
                if (parseInt(response.length) > 0)
                {
                    curRecords = parseInt(($('#NewPageIndex').val()) * parseInt($('#PageSize').val()));
                    curRecords = curRecords - (50 - parseInt(response.length));
                    TotalRecs = parseInt(response[0].TotalRecords);
                    $('.FooterRecordCount').show();
                }
                else
                {
                    $('.FooterRecordCount').hide();
                }
                $('.RecordCountSpan').text(curRecords);
                $('.TotalCountSpan').text(TotalRecs);

                if (parseInt(response.length) > 0) {
                    if (parseInt(($('#NewPageIndex').val()) * parseInt($('#PageSize').val())) > parseInt(response[0].TotalRecords)) {
                        $("#ddlload").hide();
                    } else {
                        $("#ddlload").show();
                    }
                } else {
                    $("#ddlload").hide();
                }
                $("#RawDatas table tbody tr:not(:first)").remove();
                $("#RawDatas table tbody tr:eq(0)").show();
                for (var i = 0; i < response.length; i++) {
                    var table = $("#RawDatas table tbody tr:eq(0)").clone(true);
                    $(".memname", table).html(response[i].Memberlastname + ', ' + response[i].Memberfirstname);
                    $(".email", table).html(response[i].Memberemailid);
                    $(".clubname", table).html(response[i].ClublocationidDesc);
                    $(".insname", table).html(response[i].InsurancecompanyidDesc);
                    $('.memberstatus', table).html(response[i].MemberStatusDesc);
                    $("#editdata", table).attr('href', '/Member/Edit?Memberid=' + response[i].Memberid);
                    $('#Deletedata', table).attr('href', '/Member/DeleteSadmin?Memberid=' + response[i].Memberid);
                    $("#RawDatas table").append(table);
                }
                $("#RawDatas table tbody tr:eq(0)").hide();
                $("#loading").hide();
            },
            failure: function (response) {
            },
            error: function (response) {
            }
        });
    }
    function SortingFun(val) {       
        $("#ddlload").hide();
        $('#loading').show();
        if (val == 'name') {
            if ($('#namehdn').val() == 'asc') {
                Sort = 'order by Memberlastname desc';
            }
            else {
                Sort = 'order by Memberlastname asc';
            }
        }        
        if (val == 'club') {
            if ($('#clubhdn').val() == 'asc') {
                Sort = 'order by ClublocationidDesc desc';
            }
            else {
                Sort = 'order by ClublocationidDesc asc';
            }
        }
        if (val == 'insurancecomp') {
            if ($('#insurancecomhdn').val() == 'asc') {
                Sort = 'order by InsurancecompanyidDesc desc';
            }
            else {
                Sort = 'order by InsurancecompanyidDesc asc';
            }
        }
        if (val == 'memberemailid') {
            if ($('#memberemailidhdn').val() == 'asc') {
                Sort = 'order by memberemailid desc';
            }
            else {
                Sort = 'order by memberemailid asc';
            }
        }
        var from = '01/01/1900';
        var to = '01/01/1900';            
        $('#RawDatas table').hide();
        $('#SortValue').val(Sort);
        $('#NewPageIndex').val('1');        
        $.ajax({
            type: "Get",
            cache: false,
            url: "/Member/GetMemberData",
            data: { 'pageIndex': $('#NewPageIndex').val(), 'PageSize': $('#PageSize').val(), 'SearchFirstName': '', 'SearchLastName': '', 'Clientid': '', 'Barcode': '', 'hasEmail': '0', 'hasContract': '0', 'hasAccountNo': '0', 'hasPolicyNo': '0', 'hasGroupNo': '0', 'From': from, 'To': to, clublocationid: '0', clublocationName: '', insuranceid: '0', MemberStatus: '0', Sort: Sort, IsVerified: '0' },
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function (response) {
                var curRecords = 0;
                var TotalRecs = 0;
                if (parseInt(response.length) > 0) {
                    curRecords = parseInt(($('#NewPageIndex').val()) * parseInt($('#PageSize').val()));
                    curRecords = curRecords - (50 - parseInt(response.length));
                    TotalRecs = parseInt(response[0].TotalRecords);
                    $('.FooterRecordCount').show();
                }
                else {
                    $('.FooterRecordCount').hide();
                }
                $('.RecordCountSpan').text(curRecords);
                $('.TotalCountSpan').text(TotalRecs);
                if (parseInt(response.length) > 0) {
                    if (parseInt(($('#NewPageIndex').val()) * parseInt($('#PageSize').val())) > parseInt(response[0].TotalRecords)) {
                        $("#ddlload").hide();
                    } else {
                        $("#ddlload").show();
                    }
                } else {
                    $("#ddlload").hide();
                }
                if (response.length > 0) {
                    $('#RawDatas table').show();
                    $("#RawDatas table tbody tr:not(:first)").remove();
                    $("#RawDatas table tbody tr:eq(0)").show();
                    for (var i = 0; i < response.length; i++) {
                        var table = $("#RawDatas table tbody tr:eq(0)").clone(true);
                        $(".memname", table).html(response[i].Memberlastname + ', ' + response[i].Memberfirstname);
                        $(".email", table).html(response[i].Memberemailid);
                        $(".clubname", table).html(response[i].ClublocationidDesc);
                        $(".insname", table).html(response[i].InsurancecompanyidDesc);
                        $('.memberstatus', table).html(response[i].MemberStatusDesc);
                        $("#editdata", table).attr('href', '/Member/Edit?Memberid=' + response[i].Memberid);
                        $('#Deletedata', table).attr('href', '/Member/DeleteSadmin?Memberid=' + response[i].Memberid);
                        $("#RawDatas table").append(table);
                    }
                    $("#RawDatas table tbody tr:eq(0)").hide();
                }                
                $('#namei').removeClass('fa-sort-desc');
                $('#namei').addClass('fa-sort-asc');
                $('#clubi').removeClass('fa-sort-desc');
                $('#clubi').addClass('fa-sort-asc');
                $('#insurancecomi').removeClass('fa-sort-desc');
                $('#insurancecomi').addClass('fa-sort-asc');
                $('#memberemailidi').removeClass('fa-sort-desc');
                $('#memberemailidi').addClass('fa-sort-asc');
                if (val == 'name') {
                    if ($('#namehdn').val() == 'asc') {
                        $('#namehdn').val('desc');
                        $('#namei').removeClass('fa-sort-asc');
                        $('#namei').addClass('fa-sort-desc');
                    }
                    else {
                        $('#namehdn').val('asc');
                        $('#namei').removeClass('fa-sort-desc');
                        $('#namei').addClass('fa-sort-asc');
                    }
                }
                if (val == 'club') {
                    if ($('#clubhdn').val() == 'asc') {
                        $('#clubhdn').val('desc');
                        $('#clubi').removeClass('fa-sort-asc');
                        $('#clubi').addClass('fa-sort-desc');
                    }
                    else {

                        $('#clubhdn').val('asc');
                        $('#clubi').removeClass('fa-sort-desc');
                        $('#clubi').addClass('fa-sort-asc');
                    }
                }
                if (val == 'insurancecomp') {
                    if ($('#insurancecomhdn').val() == 'asc') {

                        $('#insurancecomhdn').val('desc');
                        $('#insurancecomi').removeClass('fa-sort-asc');
                        $('#insurancecomi').addClass('fa-sort-desc');
                    }
                    else {

                        $('#insurancecomhdn').val('asc');
                        $('#insurancecomi').removeClass('fa-sort-desc');
                        $('#insurancecomi').addClass('fa-sort-asc');
                    }
                }
                if (val == 'memberemailid') {
                    if ($('#memberemailidhdn').val() == 'asc') {

                        $('#memberemailidhdn').val('desc');
                        $('#memberemailidi').removeClass('fa-sort-asc');
                        $('#memberemailidi').addClass('fa-sort-desc');
                    }
                    else {

                        $('#memberemailidhdn').val('asc');
                        $('#memberemailidi').removeClass('fa-sort-desc');
                        $('#memberemailidi').addClass('fa-sort-asc');
                    }
                }
                $('#loading').hide();
            },
            failure: function (response) {                
            },
            error: function (response) {                
            }
        });
    }
    //$('#verified').change(function () {
    //    $('#Clubnamei').addClass('fa-sort-asc');
    //    $('#addressi').addClass('fa-sort-asc');
    //    $('#clientidi').addClass('fa-sort-asc');
    //    $('#emailidi').addClass('fa-sort-asc');
    //    $('#Insurance').change();
    //});
</script>
@{   
    <div id="loading">
        <img id="loading-image" src="~/Content/img/loading.gif" alt="Loading..." style="left: 55%;" />
    </div>
    <div class="box-content">
        <input type="hidden" id="namehdn" value="asc" />
        <input type="hidden" id="clubhdn" value="asc" />
        <input type="hidden" id="insurancecomhdn" value="asc" />
        <input type="hidden" id="memberemailidhdn" value="asc" />
        <input type="hidden" id="SortValue" value="order by Memberlastname asc" />
        <div class="clearfix"></div>     
        <div class="clearfix"></div>
        <div class="control-group clearfix">
            <label style="float: right; color: #0088cc;">
                <span class="RecordCountSpan" style="color: #0088cc; font-weight: bold;">
                    0
                </span> out of
                <span class="TotalCountSpan" style="font-weight: bold;">
                    0
                </span>
                records
            </label>
        </div>
        <div id="RawDatas">
            <table class="table table-striped table-bordered bootstrap-datatable">
                <thead>
                    <tr>
                        <th onclick="SortingFun('name');" style="cursor: pointer;">
                            "namei" class="fa fa-sort-asc"__^
                            Email Address
                        </th>
                        @if (OBMI.GlobalModels.GlobalUtils.UserRole != "Club Manager")
                        {
                            <th onclick="SortingFun('club');" style="cursor: pointer;">
                                ^__i id="clubi" class="fa fa-sort-asc"__^</i__^
                                Club
                            </th>
                        }
                        <th onclick="SortingFun('insurancecomp');" style="cursor: pointer;">
                            ^__i id="insurancecomi" class="fa fa-sort-asc">
                            Insurance Company
                        </th>
                        <th>
                            Member Status
                        </th>
                        <th>Action</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>
                            <span class="memname"></span>
                        </td>

                        <td>
                            <span class="email"></span>
                        </td>
                        @if (OBMI.GlobalModels.GlobalUtils.UserRole != "Club Manager")
                        {
                            <td>
                                <span class="clubname"></span>
                            </td>
                        }
                        <td>
                            <span class="insname"></span>
                        </td>
                        <td>
                            <span class="memberstatus"></span>
                        </td>
                        <td>
                            <a class="btn btn-info" id="editdata" style="padding: 2px 7px; margin: 2px;">^__i class="fa fa-edit" title="Edit"></a>
                            <a class="btn btn-danger" id="Deletedata" style="padding: 2px 7px; margin: 2px;" onclick="return confirm('Are you sure you want to delete this record?'); ">^__i class="fa fa-trash" title="Delete"></a>
                            @*				 <a class="btn btn-success" style="padding:2px 7px; margin:2px;" href="/Member/Details?Memberid=@item.Memberid ">^__i class="halflings-icon white zoom-in"></a>  *@

                        </td>
                    </tr>
                </tbody>
            </table>
            <br />
            <div style="text-align: center" id="ddlload">
                <a href="#" class="btn btn-primary" id="loaddata" onclick="Getdata();">Load more</a>
                @Html.Hidden("hdnload", 0)
            </div>
            <div class="text-center" id="loading1" style="display: none;">
                <img src="~/Images/spiffygif_30x30.gif" />
            </div>
            <div class="control-group clearfix">
                <label style="float: right; color: #0088cc;"><span class="RecordCountSpan" style="color: #0088cc; font-weight: bold;">0 </span> out of <span class="TotalCountSpan" style="font-weight: bold;">0</span> records</label>
            </div>
        </div>
        <div class="pagination" style="display: none;">
            <ul style="padding-left: 10px; float: left; margin: 0px 0px 20px">
                <li class="prev">
                    <a href="#">Previous</a>
                </li>
                <li class="active">
                    <a href="#">
                        <label id="lblPageIndex" style="margin: 0px;"></label>
                    </a>
                </li>
                <li class="next">
                    <a href="#">Next</a>
                </li>
            </ul>
            <input type="hidden" id="NewPageIndex" value='1' />
            <input type="hidden" id="TotalPageRecord" value='0' />
            <input type="hidden" id="StartIndex" value="1" />
            <input type="hidden" id="EndIndex" value="10" />
            <div style="float: right; line-height: 13px; padding: 1px 10px 1px 5px;">
                <select id="PageSize">
                    <option value="10">10</option>
                    <option value="20">20</option>
                    <option selected="selected" value="50">50</option>
                    <option value="100">100</option>
                </select>
                <span style="line-height: 25px; vertical-align: bottom;">Records/Page</span>
            </div>
            <input type="hidden" id="scrollIndex" value="0" />
        </div>
    </div>
}
<script>
    $(function () {
    });
    function Getdata() {
        $("#loading1").show();
        $("#hdnload").val("1");
        $("#ddlload").hide();
        GetRecords();
    }
    $(window).on('mousewheel DOMMouseScroll', function (e) {
        var scroll = $(window).scrollTop();
        var direction = (function () {
            var delta = (e.type === 'DOMMouseScroll' ? e.originalEvent.detail * -40 : e.originalEvent.wheelDelta);
            return delta > 0 ? 0 : 1;
        }());
        if (direction === 1) {
            var maxVal = parseInt((parseInt($(document).height()) * 95) / 100);
            var lowVal = $(window).scrollTop() + $(window).height();
            if (lowVal >= maxVal) {
                //alert("page down!");
                if ($("#NewPageIndex").val() != "1" && $("#loading1").css('display') == 'none') {
                    // console.log('Scroll down' + $('#NewPageIndex').val());
                    $("#ddlload").hide();
                    GetRecords();
                }
            }
        }
    });
    function GetRecords() {
        var CountVal = (parseInt($('#NewPageIndex').val()) + 1);
        $('#NewPageIndex').val(CountVal);
        $("#loading1").show();
        var from = '01/01/1900';
        var to = '01/01/1900';
        $.ajax({
            type: "Get",
            cache: false,
            url: "/Member/GetMemberData",
            data: { 'pageIndex': $('#NewPageIndex').val(), 'PageSize': $('#PageSize').val(), 'SearchFirstName': '', 'SearchLastName': '', 'Clientid': '', 'Barcode': '', 'hasEmail': '0', 'hasContract': '0', 'hasAccountNo': '0', 'hasPolicyNo': '0', 'hasGroupNo': '0', 'From': from, 'To': to, clublocationid: '0', clublocationName: '', insuranceid: '0', MemberStatus: '0', Sort: 'order by Memberlastname asc', IsVerified: '0' },           
            contentType: "application/json; charset=utf-8",
            dataType: "json",           
            async: false,
            success: OnSuccess,
            failure: function (response) {
                //alert(response.d);
            },
            error: function (response) {
                //alert(response.d);
            }
        });
    }

    function OnSuccess(response) {
        var curRecords = 0;
        var TotalRecs = 0;
        if (parseInt(response.length) > 0)
        {
            curRecords = parseInt(($('#NewPageIndex').val()) * parseInt($('#PageSize').val()));
            curRecords = curRecords - (50 - parseInt(response.length));
            TotalRecs = parseInt(response[0].TotalRecords);
            $('.RecordCountSpan').text(curRecords);
            $('.FooterRecordCount').show();
            $('.TotalCountSpan').text(TotalRecs);
        }
        if (parseInt(response.length) > 0)
        {
            if (parseInt(($('#NewPageIndex').val()) * parseInt($('#PageSize').val())) > parseInt(response[0].TotalRecords)) {
                $("#ddlload").hide();
            } else {
                $("#ddlload").show();
            }
        }
        else
        {
            $("#ddlload").hide();
        }
        if (response.length > 0)
        {
            $("#RawDatas table tbody tr:eq(0)").show();
            for (var i = 0; i < response.length; i++)
            {
                var table = $("#RawDatas table tbody tr:eq(0)").clone(true);
                $(".memname", table).html(response[i].Memberlastname + ', ' + response[i].Memberfirstname);
                $(".email", table).html(response[i].Memberemailid);
                $(".clubname", table).html(response[i].ClublocationidDesc);
                $(".insname", table).html(response[i].InsurancecompanyidDesc);
                $('.memberstatus', table).html(response[i].MemberStatusDesc);
                $("#editdata", table).attr('href', '/Member/Edit?Memberid=' + response[i].Memberid);
                $('#Deletedata', table).attr('href', '/Member/DeleteSadmin?Memberid=' + response[i].Memberid);
                $("#RawDatas table").append(table);
                if ('@BackFortd' != '') {
                    if ('@BackFortd' == response[i].Memberid) {
                        $("#editdata", table).focus();
                        $(table).focus();
                    }
                }
            }
            $("#RawDatas table tbody tr:eq(0)").hide();
        }
        else
        {
            $("#loading1").hide();
        }
        $("#loading1").hide();
    }
</script>

Member 11882351 · Accepted Answer · 2019-02-11T19:18:00

@{
string BackFortd = Convert.ToString(TempData["BackFor"]);
}

$(document).ready(function () {
$("#ddlload").hide();
$('#loading').show();
$('#NewPageIndex').val('1');
bindMemberList();
});
function bindMemberList() {
$("#loading").show();
var from = '01/01/1900';
var to = '01/01/1900';
$.ajax({
type: "Get",
cache: false,
url: "/Member/GetMemberData",
data: { 'pageIndex': $('#NewPageIndex').val(), 'PageSize': $('#PageSize').val(), 'SearchFirstName': '', 'SearchLastName': '', 'Clientid': '', 'Barcode': '', 'hasEmail': '0', 'hasContract': '0', 'hasAccountNo': '0', 'hasPolicyNo': '0', 'hasGroupNo': '0', 'From': from, 'To': to, clublocationid: '0', clublocationName: '', insuranceid: '0', MemberStatus: '0', Sort: 'order by Memberlastname asc', IsVerified: '0' },
contentType: "application/json; charset=utf-8",
dataType: "json",
async: false,
success: function (response) {
var curRecords = 0;
var TotalRecs = 0;
if (parseInt(response.length) > 0)
{
curRecords = parseInt(($('#NewPageIndex').val()) * parseInt($('#PageSize').val()));
curRecords = curRecords - (50 - parseInt(response.length));
TotalRecs = parseInt(response[0].TotalRecords);
$('.FooterRecordCount').show();
}
else
{
$('.FooterRecordCount').hide();
}
$('.RecordCountSpan').text(curRecords);
$('.TotalCountSpan').text(TotalRecs);

if (parseInt(response.length) > 0) {
if (parseInt(($('#NewPageIndex').val()) * parseInt($('#PageSize').val())) > parseInt(response[0].TotalRecords)) {
$("#ddlload").hide();
} else {
$("#ddlload").show();
}
} else {
$("#ddlload").hide();
}
$("#RawDatas table tbody tr:not(:first)").remove();
$("#RawDatas table tbody tr:eq(0)").show();
for (var i = 0; i 0) {
curRecords = parseInt(($('#NewPageIndex').val()) * parseInt($('#PageSize').val()));
curRecords = curRecords - (50 - parseInt(response.length));
TotalRecs = parseInt(response[0].TotalRecords);
$('.FooterRecordCount').show();
}
else {
$('.FooterRecordCount').hide();
}
$('.RecordCountSpan').text(curRecords);
$('.TotalCountSpan').text(TotalRecs);
if (parseInt(response.length) > 0) {
if (parseInt(($('#NewPageIndex').val()) * parseInt($('#PageSize').val())) > parseInt(response[0].TotalRecords)) {
$("#ddlload").hide();
} else {
$("#ddlload").show();
}
} else {
$("#ddlload").hide();
}
if (response.length > 0) {
$('#RawDatas table').show();
$("#RawDatas table tbody tr:not(:first)").remove();
$("#RawDatas table tbody tr:eq(0)").show();
for (var i = 0; i
@{

0
out of

0

records

Name

Email Address

@if (OBMI.GlobalModels.GlobalUtils.UserRole != "Club Manager")
{

Club

}

Insurance Company

Member Status

Action

@if (OBMI.GlobalModels.GlobalUtils.UserRole != "Club Manager")
{

}

@* *@

Load more
@Html.Hidden("hdnload", 0)

0 out of 0 records

Previous

Next

10
20
50
100

Records/Page

}

$(function () {
});
function Getdata() {
$("#loading1").show();
$("#hdnload").val("1");
$("#ddlload").hide();
GetRecords();
}
$(window).on('mousewheel DOMMouseScroll', function (e) {
var scroll = $(window).scrollTop();
var direction = (function () {
var delta = (e.type === 'DOMMouseScroll' ? e.originalEvent.detail * -40 : e.originalEvent.wheelDelta);
return delta > 0 ? 0 : 1;
}());
if (direction === 1) {
var maxVal = parseInt((parseInt($(document).height()) * 95) / 100);
var lowVal = $(window).scrollTop() + $(window).height();
if (lowVal >= maxVal) {
//alert("page down!");
if ($("#NewPageIndex").val() != "1" && $("#loading1").css('display') == 'none') {
// console.log('Scroll down' + $('#NewPageIndex').val());
$("#ddlload").hide();
GetRecords();
}
}
}
});
function GetRecords() {
var CountVal = (parseInt($('#NewPageIndex').val()) + 1);
$('#NewPageIndex').val(CountVal);
$("#loading1").show();
var from = '01/01/1900';
var to = '01/01/1900';
$.ajax({
type: "Get",
cache: false,
url: "/Member/GetMemberData",
data: { 'pageIndex': $('#NewPageIndex').val(), 'PageSize': $('#PageSize').val(), 'SearchFirstName': '', 'SearchLastName': '', 'Clientid': '', 'Barcode': '', 'hasEmail': '0', 'hasContract': '0', 'hasAccountNo': '0', 'hasPolicyNo': '0', 'hasGroupNo': '0', 'From': from, 'To': to, clublocationid: '0', clublocationName: '', insuranceid: '0', MemberStatus: '0', Sort: 'order by Memberlastname asc', IsVerified: '0' },
contentType: "application/json; charset=utf-8",
dataType: "json",
async: false,
success: OnSuccess,
failure: function (response) {
//alert(response.d);
},
error: function (response) {
//alert(response.d);
}
});
}

function OnSuccess(response) {
var curRecords = 0;
var TotalRecs = 0;
if (parseInt(response.length) > 0)
{
curRecords = parseInt(($('#NewPageIndex').val()) * parseInt($('#PageSize').val()));
curRecords = curRecords - (50 - parseInt(response.length));
TotalRecs = parseInt(response[0].TotalRecords);
$('.RecordCountSpan').text(curRecords);
$('.FooterRecordCount').show();
$('.TotalCountSpan').text(TotalRecs);
}
if (parseInt(response.length) > 0)
{
if (parseInt(($('#NewPageIndex').val()) * parseInt($('#PageSize').val())) > parseInt(response[0].TotalRecords)) {
$("#ddlload").hide();
} else {
$("#ddlload").show();
}
}
else
{
$("#ddlload").hide();
}
if (response.length > 0)
{
$("#RawDatas table tbody tr:eq(0)").show();
for (var i = 0; i

How to get data usiing javascript in MVC and wheel scrol time get 50 record

2 solutions

Solution 1

Solution 2

Add your solution here

Preview 0

Existing Members

...or Join us