使用 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 数据表插件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持html5模板网！