【问题标题】:How to populate data in jquery data table without making ajax call?如何在不进行ajax调用的情况下填充jquery数据表中的数据?
【发布时间】:2016-02-10 05:11:16
【问题描述】:

我正在使用 jquery 数据表插件使用 ajax 填充 web 表中的数据。但是我想通过调用 js 文件中存在的方法而不进行 ajax 调用来填充数据。有什么办法吗?

分享我的代码。

 ajax : $.fn.dataTable.pipelineAdv({
            url : oMapUrls.loadDefaultMap,
            pages : !bLivePaginate ? -1 : Global.pageSize,
            method : "POST",
            contentType : "application/json",
            data : function() {
                var requestData = {
                    serverSide : false
                };
                if (bTimeFiltered) {
                    requestData.withInTime = iFilterByTime;
                }
                if (sFilteredVehicleIds) {
                    requestData.vehicleIds = sFilteredVehicleIds;
                }
                return requestData;
            },
            redraw : function() {
                return (getPageName() === "map");
            },
            callback : function(oJSON, request) {
                aLiveFleetData = oJSON.serverResponse.result;
                if (mapRefreshTimer) {
                    window.clearTimeout(mapRefreshTimer);
                }
                setMapRefreshTimer();
            }
        }),
        oCustomization : {
            sExportFunctionCall : oMapUrls.exportLiveFleetReport,
            bAdvanceExport : true,
            bShowDefaultAll : !bLivePaginate
        },
        pageLength : !bLivePaginate ? -1 : Global.rowLength,
        scrollCollapse : false,
        scrollY : iDataTableHeight,
        serverSide : bLivePaginate,
        order : [ [ 3, "desc" ] ],
        columns : [
                {
                    "data" : "trackeeName",
                    "width" : aColumnWidths[0],
                    "class" : "no-word-break",
                    "settings" : {
                        source : function(request, oCallback) {
                            oCallback($.ui.autocomplete.filter(Global.aJSTreeVehicleItems || [], request.term));
                        }
                    },
                    "title" : jQuery.i18n.prop("report.columnTitle.vehicle"),
                    "render" : function(value, type, rowData) {
                        if (type == "display") {
                            rowData.formattedDate = Global.getTimeStampToDate(rowData.dateAndTime, rowData.offset,
                                    rowData.timeZone);

                        }
                        return rowData.trackeeName;

                    }
                },
                {
                    "data" : "firstName",
                    "width" : aColumnWidths[1],
                    "class" : "no-word-break",
                    settings : {
                        source : Global.getDriverSuggestion
                    },
                    "title" : jQuery.i18n.prop("driver.title.txtInfo"),
                    "visible" : Global['show.driver.in.reports'] == 1,
                    "render" : function(value, type, rowData) {
                        return getUserName(rowData.firstName, rowData.lastName);
                    }
                },
                {
                    "data" : "groupName",
                    "width" : aColumnWidths[2],
                    "class" : "no-word-break",
                    "settings" : {
                        source : function(request, oCallback) {
                            oCallback($.ui.autocomplete.filter(Global.aJSTreeGroupItems || [], request.term));
                        }
                    },

我通过传递 url 进行 Ajax 调用并获取 json 格式的数据,但我想调用一个有数据的方法并将其传递给数据表,而不进行 ajax 调用。

【问题讨论】:

  • 你能分享你的代码吗?
  • 你读过这个jquery data table plugin的文档吗
  • 我已经分享了代码@LearningMode。
  • 感谢分享文档@JaromandaX

标签: javascript jquery datatable datatables


【解决方案1】:

您可以通过设置data 选项来设置自定义数据。示例和使用详情在这里http://datatables.net/reference/option/data。将 data 选项设置为返回首选数据数组的函数。

【讨论】:

  • 无法投票,因为我没有足够的积分。谢谢@Pranav C Balan。
  • 您能否告诉我如何根据该行的 id 更新选定的行?
  • 您可以设置columnDefs选项并使用嵌套属性renderdatatables.net/examples/advanced_init/column_render.html根据数据渲染输出
猜你喜欢
  • 2023-01-02
  • 1970-01-01
  • 1970-01-01
  • 2012-01-23
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2018-01-19
相关资源
最近更新 更多