簡體   English   中英

是否有可能重新加載服務器端jquery數據表?

[英]Is it possible reload server side jquery datatable?

編輯:經過進一步研究,聽起來fnReloadAjax不應與服務器端jquery數據表一起使用。 我應該使用fnDraw。 但是,fnDraw使用相同的sAjaxSource重新加載該數據表。 有沒有一種方法可以用新的sAjaxSource重新加載服務器端數據表,而不必每次都重新初始化?

原始問題

我正在嘗試實現服務器端處理jquery數據表,並且無法刷新數據。 我在構建此應用程序的過程中意識到,使用服務器處理數據表比客戶端快得多。 o_O

為了刷新數據,我不再使用fnReloadAjax函數...

$("#researchTableJSON").dataTable().fnReloadAjax("store_handler.ashx?cmd=99&pubId=2&sub=0");

現在我用...

testJsonDatatable('6','1');

Java腳本

初始化表

function testJsonDatatable(pubId, sub) {
//$.fn.dataTableExt.oStdClasses.sWrapper = "display";
$("#researchTableJSON").dataTable({
    "bProcessing": true,
    "bServerSide": true,
    "bDestroy": true,
    "sAjaxSource": "/store/Data.ashx?pubId=" + pubId + "&sub=" + sub,
    "bJQueryUI": true,
    "sScrollY": "450px",
    "bPaginate": false,
    //"bSort": false,
    "bInfo": true,
    "aoColumns": [
        { "sWidth": "400px", "sClass": "center" },
        { "sWidth": "80px", "sClass": "center" },
        { "sWidth": "61px", "sClass": "center", "bSortable": false }
    ]
});

C#.Net

    <%@ WebHandler Language="C#" Class="Data" %>

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Script.Serialization;
using System.Data;
using System.Data.SqlClient;
using System.Configuration;

public class Data : IHttpHandler
{
    private HttpRequest Request;
    private HttpResponse Response;

    public void ProcessRequest(HttpContext context)
    {
        Request = context.Request;
        Response = context.Response;
        var pubId = Request["pubId"];
        var sub = Request["sub"];

        // Paging parameters:
        var iDisplayLength = int.Parse(Request["iDisplayLength"]);
        var iDisplayStart = int.Parse(Request["iDisplayStart"]);

        // Sorting parameters
        var iSortCol = int.Parse(Request["iSortCol_0"]);
        var iSortDir = Request["sSortDir_0"];

        // Search parameters
        var sSearch = Request["sSearch"];

        // Fetch the data from a repository (in my case in-memory)
        var products = Product.GetProducts(pubId, sub);

        // Define an order function based on the iSortCol parameter
        Func<Product, object> order = product => iSortCol == 0 ? (object)product.Title : product.Price;

        // Define the order direction based on the iSortDir parameter
        products = "desc" == iSortDir ? products.OrderByDescending(order) : products.OrderBy(order);

        // prepare an anonymous object for JSON serialization
        var result = new
        {
            iTotalRecords = products.Count(),
            iTotalDisplayRecords = products.Count(),
            aaData = products
                .Where(p => p.Title.Contains(sSearch))  // Search: Avoid Contains() in production
                //.Where(p => p.Id.ToString().Contains(sSearch))
                .Select(p => new[] { p.Title, p.Price.ToString(), p.Action })
                //.Skip(iDisplayStart)   // Paging
                //.Take(iDisplayLength)
        };

        var serializer = new JavaScriptSerializer();
        var json = serializer.Serialize(result);
        Response.ContentType = "application/json";
        Response.Write(json);
    }

    public bool IsReusable { get { return false; } }
}

public class Product
{
    public string Title { get; set; }
    public string Price { get; set; }
    public string Action { get; set; }

    public static IEnumerable<Product> GetProducts(string pubId, string sub)
    {
        /*for (int i = 0; i < 57; i++)
        {
            yield return new Person { Id = i, Name = "name " + i };
        }*/

        decimal price;
        int count = 1;

        using (SqlConnection oConn = new SqlConnection(ConfigurationManager.ConnectionStrings["TpsRead"].ConnectionString))
        {
            SqlDataReader reader;
            SqlCommand oCommand = new SqlCommand();

            oCommand.Connection = oConn;
            oCommand.CommandText = "select distinct pi.pid, pi.display_title, pi.price_ppp, pi.price_sub from tps..sh_pid_info pi inner join tps..sh_pid_detail pd on pi.pid = pd.sub_pid where pi.pub_id=@pubid and pi.price_ppp is not null and pi.active > 0 order by display_title";
            oCommand.CommandType = CommandType.Text;

            oCommand.Parameters.Add("@pubid", SqlDbType.VarChar).Value = pubId;

            oConn.Open();
            reader = oCommand.ExecuteReader();

            while (reader.Read())
            {
                if (sub == "0")
                {
                    //check if price_ppp is null
                    if (string.IsNullOrEmpty(reader["price_ppp"].ToString()))
                        price = 0m;
                    else
                        price = Convert.ToDecimal(reader["price_ppp"].ToString());
                }
                else
                {
                    //check if price_sub is null
                    if (string.IsNullOrEmpty(reader["price_sub"].ToString()))
                        price = 0m;
                    else
                        price = Convert.ToDecimal(reader["price_sub"].ToString());
                }

                price = price / 100;

                yield return new Product { Title = reader["display_title"].ToString(), Price = price.ToString("C"), Action = "<td align=\"center\"><a href=\"JavaScript:void(0)\" onclick=\"addToCart('p_" + reader["pid"].ToString() + "','" + pubId + "')\"><img src=\"/images/store/add-to-cart.png\" alt=\"Add to Cart\" id=\"add-to-cart" + reader["pid"].ToString() + "\" style=\"cursor: pointer\" title=\"Add to Cart\" border=\"0\" /></a></td>" };

                //count++;
            }
        }
    }
}

嘗試覆蓋fnServerData: http ://www.datatables.net/usage/callbacks#fnServerData

fnServer的默認實現非常簡單,只需將其參數傳遞給$ .ajax調用即可。 除了將url屬性設置為自定義值外,您還可以在覆蓋中執行相同的操作。

然后,您應該能夠如前所述調用fnDraw,它將使用您的自定義Ajax源,而無需重新初始化整個表。

// These are essentially globals right now. 
// They can be modified before your fnDraw call. 
// You may want to namespace them or find another way to encapsulate.
pubId = ...;
sub = ...;

$("#researchTableJSON").dataTable({
    // your other init properties here
    fnServerData: function ( url, data, callback, settings ) {
        settings.jqXHR = $.ajax( {
            "url": "/store/Data.ashx?pubId=" + pubId + "&sub=" + sub,
            "data": data,
            "success": function (json) {
                $(settings.oInstance).trigger('xhr', settings);
                callback( json );
            },
            "dataType": "json",
            "cache": false
        } );
    }
});

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM