Jquery 禁用初始自动ajax调用-DataTable服务器端分页

我有一个用服务器端分页初始化的dataTable，它工作正常。该表在初始化期间触发ajax、提取数据并呈现到表中。但是，我最初需要空表，并使用load（）或reload（）单击按钮加载表数据，如：

以下是我的表初始化：

function initTestTable(){
    myTable =  $('#testTable').dataTable({
    "processing": true,
    "serverSide": true,
    "ajax": {
        "url": "testTableData.html",
        "type": "GET",
    },
    "columns": [
        { "data": "code" },
        { "data": "description" }
    ]
 });
}

function initTestTable(){
    myTable =  $('#testTable').dataTable({
    "processing": true,
    "serverSide": true,
    "ajax": {
        "url": "testTableData.html?action=load",
        "type": "GET",
    },
    "columns": [
        { "data": "code" },
        { "data": "description" }
    ]
 });
}

在初始化期间应该有一种方法来限制表的加载吗？我读了文档，但找不到。请建议。

您可以使用该参数并将其设置为

0

。这将延迟数据加载，直到以编程方式执行筛选、排序操作或绘制/重新加载Ajax

function initTestTable(){
    myTable =  $('#testTable').dataTable({
    "processing": true,
    "serverSide": true,
    "deferLoading": 0, // here
    "ajax": {
        "url": "testTableData.html",
        "type": "GET",
    },
    "columns": [
        { "data": "code" },
        { "data": "description" }
    ]
 });
}

要在单击按钮时触发Ajax，可以在处理程序中设置如下内容：

function buttonClickHandler(event){
  $('#testTable').DataTable().draw();
}

请参见下面的示例进行演示

$（文档）.ready（函数（）{
//AJAX仿真仅用于演示
$.mockjax({
url:“/test/0”，
答复时间:200,，
响应：功能（设置）{
this.responseText={
绘制：settings.data.draw，
数据：[
[“老虎尼克松”，“系统架构师”，“爱丁堡”，61，“2011/04/25”，“320800美元]，
[“老虎尼克松”，“系统架构师”，“爱丁堡”，61，“2011/04/25”，“320800美元]，
[“老虎尼克松”，“系统架构师”，“爱丁堡”，61，“2011/04/25”，“320800美元]，
[“老虎尼克松”，“系统架构师”，“爱丁堡”，61，“2011/04/25”，“320800美元]，
[“老虎尼克松”，“系统架构师”，“爱丁堡”，61，“2011/04/25”，“320800美元]，
[“老虎尼克松”，“系统架构师”，“爱丁堡”，61，“2011/04/25”，“320800美元]，
[“老虎尼克松”，“系统架构师”，“爱丁堡”，61，“2011/04/25”，“320800美元]，
[“老虎尼克松”，“系统架构师”，“爱丁堡”，61，“2011/04/25”，“320800美元]，
[“老虎尼克松”，“系统架构师”，“爱丁堡”，61，“2011/04/25”，“320800美元]，
[“老虎尼克松”，“系统架构师”，“爱丁堡”，61，“2011/04/25”，“320800美元”]
],
记录总数：1000，
过滤记录：1000
};
}
});
$（'#示例'）。数据表（{
“处理”：对，
“服务器端”：正确，
“延迟加载”：0，
“ajax”：{
“url”：“/测试/0”，
“类型”：“获取”
}    
});
$（“#btn重新加载”）。在（'单击'，函数（）上{
$（'#示例'）.DataTable（）.draw（）
});
});


重新加载

名称
位置
办公室
年龄
开始日期
薪水
名称
位置
办公室
年龄
开始日期
薪水
我可以通过一种变通方法来完成这项工作，即通过URL传递一个额外的参数来标识事件

例如，对于on load，我使用
action=“load”
作为查询参数初始化数据表；对于其他类似搜索的操作，我传递
action=“search”
。有了这个，我，在后端，将能够识别呼叫来源。如果它不是
“load”
，那么我将拉取数据并传递（就像现在的实现一样）。否则（如果“load”），则我将传递空数据，这将向我显示
“找不到数据”
消息，就好像它没有进行ajax调用一样

下面是我的代码表初始化：

function initTestTable(){
    myTable =  $('#testTable').dataTable({
    "processing": true,
    "serverSide": true,
    "ajax": {
        "url": "testTableData.html",
        "type": "GET",
    },
    "columns": [
        { "data": "code" },
        { "data": "description" }
    ]
 });
}

function initTestTable(){
    myTable =  $('#testTable').dataTable({
    "processing": true,
    "serverSide": true,
    "ajax": {
        "url": "testTableData.html?action=load",
        "type": "GET",
    },
    "columns": [
        { "data": "code" },
        { "data": "description" }
    ]
 });
}

对于除加载以外的事件（如按钮单击）：

这是一个我必须在不修改表init的情况下进行的操作，这将导致错误

感谢@JSelser和@davidkonrad的所有建议：）
这是我最初在页面加载时加载空数据表的方式。然后，我使用eventListener通过ajax加载数据。我找不到任何文档，只是随便玩了一下，效果很不错

ref文件-dataTables.js，table advanced.js

$(document).ready(function(){
   option = "I";
  // pick a table list or something
  $("#dropdownList").on("change", function(){
      option = $('option:selected:not(:disabled)',this).val();
    if($.fn.DataTable.isDataTable('#table_001')){
       $('#table_001').dataTable().fnDestroy();
       InitDataTable(option); 
     }
     else{
       InitDataTable("disabled");   
     }    
    });

     //add/delete/update a row maybe?
     $("#signupForm #add_btn").on("click",function(e){
       if($("#signupForm").valid()){
            var oTable1 = $('#table_001').DataTable(); ///load .ajax structure 
             //Successful Submit!
             oTable1.ajax.reload(); 
            $("#note").html(<img src="/images/loading.gif" alt="loading">');
        }
     });

     //On draw occurs everytime you call table.ajax.reload(); 
     $('#table_001').on( 'draw.dt', function () { 
            if(option !== "I")
                  var evtname = $('select[name="EVENT"] option:selected:not(:disabled)').text();

            if(evtname !== undefined)
                $("#event_name").html("The " + evtname + " Signup Sheet").addClass("xs-small");
            // keep track of values for table input fields on each draw
            $("[aria-controls='table_001'][type='search']").attr('hth_orig',$("            [aria-controls='table_001'][type='search']").val());
            //Don't initialize on draw 
            TableAdvanced.init('table_001','N');
});


  var InitDataTable = function(choice){

            var oTable1 = $('#table_001').dataTable( {
                "processing": true,
                "serverSide": true,
                "lengthMenu": [10,25,50,100], // records pulldown
                "iDisplayLength": 25, // # records to initially display
                "ajax": {
                    "url": "http://www.domain.com",
                    "data": function (d) { // pass additional        
                                d.user = user; 
                                d.choice = choice; 
                                d.cols = "15"; // TOTAL <td> tags per <tr> tag  
                    },
                    // Load attendee total and pending total sections 
                    complete: function (d) {
                        recordstotal = d.responseJSON.recordsTotal;
                        attendeetotal = d.responseJSON.attendeeTotal;
                        //console.log(JSON.stringify(d.responseJSON.data));
                        if ( attendeetotal == '0') {
             $("#totalAttendees").html("No one has signed up for this event yet");
                        }
                        else {
        $("#totalAttendees").html("Event Total: " +  attendeetotal + " attendees");                     
                        }  
                        $("#add-atn").removeClass("hidden");
                    } 
                }, 
                // insert code to execute after table has been redrawn
                "fnDrawCallback": function( oSettings ) {
                    // Column filtering
                    var table = $('#table_001').DataTable();
                    $("#table_001 tfoot th").each( function ( i ) { // i = 0,1...
                        if($.trim($(this).html()) != '') {
                            save_html = $(this).html();
                            $(this).empty(); 
                            var select = $(save_html)
                            .appendTo( this )
                            .on( 'change', function () {
               table.column( i, { filter: 'applied'                }).search($(this).val()).draw();
                            }); 
                            $("#table_001 tfoot th:eq("+i+") input").val(save_value);
                        } 
                    });     
                    //console.log($("#table_001 tfoot th").length);
                 },

                "columns": [// set "data" to next sequential number in double quotes
                        {"data":"0",// Set "name" to field name that will be refd
                        "name": "skip"},        
                        {"data":"1", 
                        "name": "skip"}, 
                        {"data": "2",
                        "name": "skip"},
                        {"data":"3", 
                        "name": "lname"},
                        {"data":"4", 
                        "name": "fname"}
                          {"data":"5",
                           "name": "skip"}
                ],      
                "columnDefs": [                    
                        // what columns should be hidden?       
                        {
                        "targets": [1], // what element starting with 0
                        "class":"hidden" // class to attach to <td>
                        },
                        // what columns should NOT be sortable?       
                        {
                        "targets": [0,1,2,5,6,7,8,9,12,13,14], 
                        "sortable": false, // sortable?
                        },
                        // what columns should NOT be searchable?       
                        {
                        "targets": [0,1,2,6,7,8,9,12,13,14],  
                        "searchable": false, // searchable?
                        }
                ],  
                "createdRow": function( row, data, dataIndex ) { 
                    //manipulate the specific column in the row   
                     //$(row).addClass( 'form-group' ); 
                     // $('td', row).eq(2).addClass('form-group'); // Added to <td>

                 },
                // Specify initial sort order       
               "order": [[ '10', "desc" ],[ '11', "desc" ],['3',"asc"],['4',"asc"]]   
            });

            // handle 1st page table load initialization using 
            TableAdvanced.init('table_001','Y');

    });
    }

$（文档）.ready（函数（）{
选项=“I”；
//挑一张桌子清单什么的
$（“#dropdownList”）。关于（“更改”，函数（）{
option=$（'option:selected:not（：disabled'），this.val（）；
if（$.fn.DataTable.isDataTable（'#table_001'））{
$（'#table_001'）.dataTable（）.fnDestroy（）；
InitDataTable（选项）；
}
否则{
InitDataTable（“禁用”）；
}    
});
//是否可以添加/删除/更新行？
$（“#注册表格#添加#btn”）。在（“单击”上，函数（e）{
if（$（“#注册表”）.valid（）{
var oTable1=$（'#table_001'）.DataTable（）；///load.ajax结构
//成功提交！
oTable1.ajax.reload（）；
$（“#注”）.html（'）；
}
});
//每次调用table.ajax.reload（）时都会发生绘制；
$（'#table_001'）。在（'draw.dt'，函数（）{
如果（选项！=“I”）
var evtname=$（'select[name=“EVENT”]选项：selected:not（：disabled））.text（）；
if（evtname！==未定义）
$（“#事件名称”）.html（“+evtname+”注册表”）.addClass（“xs小”）；
//跟踪每个绘图上表格输入字段的值
$（“[aria controls='table_001'][type='search']”）attr（'hth_orig'，$（“[aria controls='table_001'][type='search']）.val（））；
//不要在绘图时初始化
TableAdvanced.init（'table_001'，'N'）；
});
var InitDataTable=函数（选项）{
var oTable1=$（“#表_001”）。数据表（{
“处理”：对，
“服务器端”：正确，
“lengthMenu”：[10,25,50100]，//记录下拉列表
“iDisplayLength”：25，//#最初显示的记录
“ajax”：{
“url”：”http://www.domain.com",
“数据”：函数（d）{//传递附加数据
d、 用户=用户；
d、 选择=选择；
d、 cols=“15”；//每个标签的标签总数
},
//