使用 Ajax 调用加载 Asp.Net 中继器的 JQuery 数据表插件

JQuery Datatable Plugin Loading Asp.Net Repeater with Ajax Call(使用 Ajax 调用加载 Asp.Net 中继器的 JQuery 数据表插件)

本文介绍了使用 Ajax 调用加载 Asp.Net 中继器的 JQuery 数据表插件的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我正在尝试使用 DataTables 插件为 Ajax 数据绑定 Asp.Net 中继器控件,但它不起作用以下是我的代码.

I am trying to bind Asp.Net Repeater Control for Ajax Data using DataTables Plugin but its not working Following is my Code.

    $(document).ready(function () {
                $('#tblMessages').dataTable({
                    "sDom": 'T<"clear">lfrtip',
                    "oLanguage": { "sSearch": "Search the Messages:" },
                    "aLengthMenu": [[10, 25, 50, -1], [10, 25, 50, "All"]],
                    "iDisplayLength": 25,
                    "bProcessing": true,
                    "bServerSide": true,
                    "bFilter": true,
                    "sAjaxSource": "../QCDataServices.asmx/GetPatients",
                    "fnServerData": function(sSource, aoData, fnCallback) {
                        aoData.push("{pageSize:'20',pageNumber:'1'}");
                        $.ajax({
                                "type": "POST",
                                "dataType": 'json',
                                "contentType": "application/json; charset=utf-8",
                                "url": sSource,
                                "data": aoData,
                                "success": function (msg) {
                                    fnCallback(msg.d);
                                }
                            });
                    },
                    "sPaginationType": "full_numbers",
                    "oTableTools": {
                        "aButtons": [
                    "copy",
                    "csv",
                    "xls",
                    {
                        "sExtends": "pdf"
                    },
                    "print"
                ]
                    },
                    "aaSorting": [[0, "desc"]]
                });
            });

这是作为Json对象获得的类

Here is the Class which is obtained as Json object

    public class PatientGridDataSet
    {
            public int sEcho { get; set; }
            public int iTotalRecords { get; set; }
            public int iTotalDisplayRecord { get; set; }
            public List<Patient> aaData { get; set; }
        }

这是服务方法

        [WebMethod(EnableSession=true)]
            public PatientGridDataSet GetPatients(int pageSize, int pageNumber)
            {
                var patlist=Patients("", "", "");
                return new PatientGridDataSet {sEcho = pageNumber,iTotalRecords =         patlist.Count, iTotalDisplayRecord = pageSize, aaData= patlist.Skip(pageSize * pageNumber).Take(pageSize).ToList() };
            }
            [WebMethod(EnableSession = true)]
            public List<Patient> Patients(string searchIn, string Operator, string         searchString)
            {
                List<Patient> result;
                try
                {
                    DataRow[] rows;
                    var table = new dsVw_Patients.vw_PatientsDataTable();
                    var adapter = new vw_PatientsTableAdapter();
                    adapter.Fill(table);
                    //DataTable distinctTable = originalTable.DefaultView.ToTable(         /*distinct*/ true);
                    string hid = Context.Session["HospitalId"] == null ? "0" :         Context.Session["HospitalId"].ToString();
                    string rid = Context.Session["RoleId"] == null ? "0" :         Context.Session["RoleId"].ToString();
                    string uid = Context.Session["UserId"] == null ? "0" :         Context.Session["UserId"].ToString();
                    if (searchIn.Equals(""))
                    {
                        rows = hid.Equals("0") ?         table.DefaultView.ToTable(true).Select("1=1", "PatientName ASC") : table.DefaultView.ToTable(true).Select("HospitalId="+hid, "PatientName ASC");
                        if(rid.Equals("5"))
                            rows = table.DefaultView.ToTable(true).Select("UserId="+uid,         "PatientName ASC");
                    }
                    else
                    {
                        if (hid.Equals("0"))
                        {
                            rows = Operator.Contains("%") ?         table.DefaultView.ToTable(true).Select(searchIn + " like '" + Operator.Replace("_", searchString) + "'", searchIn + " ASC") : table.DefaultView.ToTable(true).Select(searchIn + " " + Operator + " '" + searchString + "'", searchIn + " ASC");
                        }
                        else
                        {
                            rows = Operator.Contains("%") ?         table.DefaultView.ToTable(true).Select("HospitalId=" + hid+" and "+searchIn + " like '" + Operator.Replace("_", searchString) + "'", searchIn + " ASC") : table.DefaultView.ToTable(true).Select("HospitalId=" + hid + " and " + searchIn + " " + Operator + " '" + searchString + "'", searchIn + " ASC");
                        }
                        if (rid.Equals("5"))
                        {
                            rows = Operator.Contains("%") ?         table.DefaultView.ToTable(true).Select(searchIn + " like '" + Operator.Replace("_", searchString) + "'", searchIn + " ASC") : table.DefaultView.ToTable(true).Select(searchIn + " " + Operator + " '" + searchString + "'", searchIn + " ASC");
                        }
                    }

                    var tieup=new clsTieUpCompanies();
                    result = rows.Select(row => new Patient
                                                    {
                                                        PatientId =         Convert.ToInt32(row["PatientId"]), PatientName = row["PatientName"].ToString(), Address = row["Address"].ToString(), Street = row["Street"].ToString(), City = row["City"].ToString(), ContactNo = row["Contactno"].ToString(), MobileNo = row["MobileNo"].ToString(), Email = row["Email"].ToString(), State = row["State"].ToString(), Country = row["Country"].ToString(), BPLCardNo = row["BPLCardNo"].ToString(), Company = tieup.GetTieupCompanyName(Convert.ToInt32(row["CompanyId"]))
                                                    }).ToList();
                }
                catch (Exception)
                {
                    result = null;
                }
                return result;
            }

首先,当我调用我的 web 服务方法时,它不会去那里,请告诉我其余代码是否正常这是标记

First Of when i call my webservice method it does not go there please tell me rest code is ok or not Here is the markup

      <asp:Repeater ID="rptList" runat="server">
        <HeaderTemplate>
            <table id="tblMessages">
                <thead>
                    <tr>
                        <th>
                            Patient Name
                        </th>
                        <th>
                            Address
                        </th>
                        <th>
                            City
                        </th>
                        <th>
                            Contact No
                        </th>
                        <th>
                        MobileNo
                        </th>
                        <th>
                        BPL Card No.
                        </th>
                    </tr>
                </thead>
                <tbody>
        </HeaderTemplate>
        <ItemTemplate>
            <tr>
                <td>
                    <%# Eval("PatientName")%>
                </td>
                <td>
                    <%#Eval("Address")%>
                </td>
                <td>
                    <%# Eval("City")%>
                </td>
                <td>
                    <%# Eval("ContactNo")%>
                </td>
                <td>
                  <%# Eval("MobileNo")%>
                </td>
                <td>
                  <%# Eval("BPLCardNo")%>
                </td>
            </tr>
        </ItemTemplate>
        <FooterTemplate>
            </tbody> </table>
        </FooterTemplate>
    </asp:Repeater>

推荐答案

@Tim B James

@Tim B James

我已经成功了.但是我尝试使用它的真正原因是无视的.仅获取 80 条记录需要花费大量时间.在这里找到我的客户端代码.

I have got it worked.But the very reason i tried used it for is defied. It takes a lot of time to fetch only 80 records. Here Find my client code.

    $(document).ready(function () {
                var grid = $('#tblMessages').dataTable({    
                     "sDom": 'T<"clear">lfrtip',
                    "oLanguage": { "sSearch": "Search the Messages:" },
                    "aLengthMenu": [[10, 25, 50, -1], [10, 25, 50, "All"]],
                    "iDisplayLength": 25,                
                    "oTableTools": {
                        "aButtons": [
                    "copy",
                    "csv",
                    "xls",
                    {
                        "sExtends": "pdf"
                    },
                    "print"
                ]
                    },    
                    "bProcessing": true,
                    "bSort": true,
                    "sPaginationType": "full_numbers",                
                    "bServerSide": true,                                
                    "sAjaxSource": "../QCDataServices.asmx/GetPatients",                                
                    "fnServerData": function (sSource, aoData, fnCallback) {
                        var jsonAOData = JSON.stringify(aoData);
                        $.ajax({
                            type: "POST",
                            //dataType: "json",
                            contentType: "application/json; charset=utf-8",
                            url: sSource,
                            data: "{jsonAOData : '" + jsonAOData + "'}",
                            success: function (msg) {                            
                                fnCallback(JSON.parse(msg.d));
                            },
                            error: function (XMLHttpRequest, textStatus, errorThrown) {
                                alert(XMLHttpRequest.status);
                                alert(XMLHttpRequest.responseText);

                            } 
                        });
                    },

                    "aoColumnDefs": [
                        { "fnRender": function (oObj) {
                            return "<a href='../FrmMessage.aspx?id='" +         oObj.aData[0] + "><img src="../../images/SMS.png"/></a>";
                        },
                            "bSortable": false,
                            "aTargets": [0]
                        },
                        { "sName": "PatientName",
                            "bSearchable": true,
                            "aTargets": [1]
                        },
                        { "sName": "Address",
                            "bSearchable": true,
                            "bSortable": true,
                            "aTargets": [2]
                        },
                        { "sName": "ContactNo", "aTargets": [3] },
                        { "sName": "MobileNo", "aTargets": [4] },                   
                        { "sName": "BPL Card No", "aTargets": [5] }
                    ]
                });
                grid.fnSetFilteringDelay(1000);
            });

我已使用此链接提供的解决方案http://activeengine.wordpress.com/2011/02/09/datatablepager-now-has-multi-column-sort-capability-for-datatables-net/

I have used Solution provided by this link http://activeengine.wordpress.com/2011/02/09/datatablepager-now-has-multi-column-sort-capability-for-datatables-net/

我的网络服务方法是

     [WebMethod(EnableSession = true)]
     [ScriptMethod(ResponseFormat = ResponseFormat.Json)]
     public string GetPatients(string jsonAOData)
     {         
         var patients= Patients("", "", "");            
         var dataTablePager = new DataTablePager<Patient>(jsonAOData, patients);
         var formattedList = dataTablePager.Filter();
         return JsonConvert.SerializeObject(formattedList);           
     }

     [WebMethod(EnableSession = true)]
    public IQueryable<Patient> Patients(string searchIn, string Operator, string searchString)
    {
        IQueryable<Patient> result ;
        try
        {
            DataRow[] rows;
            var table = new dsVw_Patients.vw_PatientsDataTable();
            var adapter = new vw_PatientsTableAdapter();
            adapter.Fill(table);
            //DataTable distinctTable = originalTable.DefaultView.ToTable( /*distinct*/ true);
            var hid = Context.Session["HospitalId"] == null ? "0" : Context.Session["HospitalId"].ToString();
            var rid = Context.Session["RoleId"] == null ? "0" : Context.Session["RoleId"].ToString();
            var uid = Context.Session["UserId"] == null ? "0" : Context.Session["UserId"].ToString();
            if (searchIn.Equals(""))
            {
                rows = hid.Equals("0") ? table.DefaultView.ToTable(true).Select("1=1", "PatientName ASC") : table.DefaultView.ToTable(true).Select("HospitalId="+hid, "PatientName ASC");
                if(rid.Equals("5"))
                    rows = table.DefaultView.ToTable(true).Select("UserId="+uid, "PatientName ASC");
            }
            else
            {
                if (hid.Equals("0"))
                {
                    rows = Operator.Contains("%") ? table.DefaultView.ToTable(true).Select(searchIn + " like '" + Operator.Replace("_", searchString) + "'", searchIn + " ASC") : table.DefaultView.ToTable(true).Select(searchIn + " " + Operator + " '" + searchString + "'", searchIn + " ASC");
                }
                else
                {
                    rows = Operator.Contains("%") ? table.DefaultView.ToTable(true).Select("HospitalId=" + hid+" and "+searchIn + " like '" + Operator.Replace("_", searchString) + "'", searchIn + " ASC") : table.DefaultView.ToTable(true).Select("HospitalId=" + hid + " and " + searchIn + " " + Operator + " '" + searchString + "'", searchIn + " ASC");
                }
                if (rid.Equals("5"))
                {
                    rows = Operator.Contains("%") ? table.DefaultView.ToTable(true).Select(searchIn + " like '" + Operator.Replace("_", searchString) + "'", searchIn + " ASC") : table.DefaultView.ToTable(true).Select(searchIn + " " + Operator + " '" + searchString + "'", searchIn + " ASC");
                }
            }
            //.Skip(pageSize*pageNumber).Take(pageSize).ToList().
            var tieup=new clsTieUpCompanies();
            result = rows.Select(row => new Patient
                                            {
                                                PatientId = Convert.ToInt32(row["PatientId"]), PatientName = row["PatientName"].ToString(), Address = row["Address"].ToString(), Street = row["Street"].ToString(), City = row["City"].ToString(), ContactNo = row["Contactno"].ToString(), MobileNo = row["MobileNo"].ToString(), Email = row["Email"].ToString(), State = row["State"].ToString(), Country = row["Country"].ToString(), BPLCardNo = row["BPLCardNo"].ToString(), Company = tieup.GetTieupCompanyName(Convert.ToInt32(row["CompanyId"]))
                                            }).AsQueryable();
        }
        catch (Exception)
        {
            result = null;
        }
        return  result;
    }

请指导如何提高性能.

这篇关于使用 Ajax 调用加载 Asp.Net 中继器的 JQuery 数据表插件的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持编程学习网!

本文标题为:使用 Ajax 调用加载 Asp.Net 中继器的 JQuery 数据表插件