我如何使用带有 asp.net asmx 页面的 ajax 为我的 html 表设置分页答案

【问题标题】：How i can set pagination to my html table using ajax with the asp.net asmx page我如何使用带有 asp.net asmx 页面的 ajax 为我的 html 表设置分页
【发布时间】：2020-08-21 07:19:25
【问题描述】：

我正在使用 ASP.Net 页面和 Webservices.asmx 网络服务。我需要在我的 HTML 表格中添加分页，但我不知道如何包含它。我尝试了几种方法，但没有成功。如有任何帮助，我将不胜感激。

aspx页面代码

<script type="text/javascript">  
    $(document).ready(function () {

        //$("#btnShowData").click(function () {

        $('#todaywork').on('click', function () {
            var timeid = $('#View').html();
            $.ajax({
                url: 'Todayworktime.asmx/Gettodaywork',
                data: { user: timeid },
                dataType: "json",
                method: 'post',
                success: function (data) {
                    var employeeTable = $('#tblEmployee tbody');

                    var employeehead = $('#tblEmployee thead');
                    employeeTable.empty();
                    employeehead.empty();
                    employeehead.append('<tr>' +

                        '<th>Username</th>' +
                        '<th>Date</th>' +
                        '<th>Total_Time</th>' +
                        '<th>Task</th>' +
                        '<th>Select</th>' +
                        '</tr > ');
                    $(data).each(function (index, emp) {

                        employeeTable.append('<tr><td>'
                            + emp.Username + '</td><td>' + emp.Date + '</td><td>' + emp.Total_Time
                            + '</td><td>' + emp.Task + '</td><td><button type="button" data-id="' + emp.Task + '" class="get_tsk" style="background-color:steelblue;color:white;border:none;">view</button></td></tr>');
                    });
                },
                error: function (err) {
                    alert(err);
                }
            });
        });
    });
</script>

我的 asmx 页面代码是

public class Todayworktime : System.Web.Services.WebService
{

    [WebMethod, ScriptMethod]
    public void Gettodaywork(string user)
    {
        List<sessionlist> employeelist = new List<sessionlist>();

        string CS = ConfigurationManager.ConnectionStrings["dbcon"].ConnectionString;
        using (SqlConnection con = new SqlConnection(CS))
        {
            SqlCommand cmd = new SqlCommand("Select * from Todaywork where Username='" + user + "' and Date='"+DateTime.Today+"'", con);
            // cmd.CommandType = CommandType.StoredProcedure;
            con.Open();

            SqlDataReader rdr = cmd.ExecuteReader();

            while (rdr.Read())
            {
                sessionlist employee = new sessionlist();
                employee.Id = Convert.ToInt32(rdr["Id"]);
                employee.Username = rdr["Username"].ToString();
                employee.Date = rdr["Date"].ToString();
                employee.Total_Time = rdr["Total_Time"].ToString();
                employee.Task = rdr["Task"].ToString();
                employeelist.Add(employee);
            }
        }
        JavaScriptSerializer js = new JavaScriptSerializer();
        Context.Response.Write(js.Serialize(employeelist));
    }
}

我使用的类：

public class sessionlist
{
    public int Id { get; set; } 
    public string Username { get; set; }
    public string Date { get; set; }
    public string Total_Time { get; set; }
    public string Task { get; set; }
}

我尝试了很多方法，但我没有得到我期望的结果，那么有人知道如何应用分页吗？

【问题讨论】：

标签： c# asp.net ajax

【解决方案1】：

您需要通过 ajax 将 currentPageNo, PageSize 传递给 asmx web 方法。在该方法中，您应该使用类似的查询 SELECT Fname, Lname FROM Employee ORDER BY Salary OFFSET @StartPage ROWS FETCH NEXT @PageSize ROWS ONLY;

【讨论】：

【解决方案2】：

看起来你已经在使用 jQuery 了。为什么不使用 jQuery 表格和分页插件来实现功能。

看看一些插件here。

您还可以查看免费的 jQuery DataTables 插件

【讨论】：