JQuery Datatable Ajax請求兩次問題的解決
最近一個專案中使用JQuery Datatable,用起來比較方便,但在測試過程中,發現當條件改變時,有時查詢結果中的資料不正確。
使用FireBug跟蹤時,發現在使用Ajax請求時,點選一次搜尋按鈕,卻傳送了兩次請求,一次是原條件的請求,一次是新的請求。
下面是查詢按鈕的程式碼。先判斷是否是Datatable,如果是的話,先Destroy掉,再重新建立。
跟蹤Datatable後發現,在執行function search(data) { var $searchResult = $("#search-result .result-panel"); if (resultDataTable) { resultDataTable.fnClearTable(); $searchResult.dataTable().fnDestroy(); $("#resultList").empty(); } else { $searchResult.show(); } resultDataTable = $searchResult.dataTable({ "bPaginate" : true, "bAutoWidth" : false, "bProcessing": true, "bFilter": false, "bJQueryUI": true, "sPaginationType": "full_numbers", "oLanguage": { //漢化 "sLengthMenu": "每頁顯示 _MENU_ 條記錄", "sZeroRecords": "沒有檢索到資料", "sInfo": "當前資料為從第 _START_ 到第 _END_ 條資料;總共有 _TOTAL_ 條記錄", "sInfoEmtpy": "沒有資料", "sProcessing": "正在載入資料...", "oPaginate": { "sFirst": "首頁", "sPrevious": "前頁", "sNext": "後頁", "sLast": "尾頁" } }, "bServerSide": true, "sServerMethod": "POST", "sAjaxSource": "${baseUrl}/zpzxResumeSearch.do?&method=<bean:message key='zjzxResume.button.search' />", //"fnServerData": executeQuery, "fnServerParams": function (aoData) { aoData.push({"name": "conds", "value": data}); }, "aoColumns": [ { "mData": null }, { "mData": "name" }, { "mData": "sex" }, { "mData": "birthday" }, { "mData": "mobilePhone" }, { "mData": "diploma" }, { "mData": "workYears" }, { "mData": "currentAddress" }, { "mData": "hukouAddress" }, { "mData": "updateTime" }, { "mData": null } ], "aoColumnDefs": [ { "aTargets": [ 1 ], "mRender": function ( data, type, full ) { return "<a target='_blank' onmouseover='showLabels(this, event);' onmouseout='hiddenLabels(this, event);' labels='"+buildResumeLabels(full)+"' href='${baseUrl}/zpzxResumeLookResult.do?resumeId=" +full.resumeId+"&zpzxTalentId=" +full.zpzxTalentId+"&method=<bean:message key='zjzxResume.button.showDetailInfo' />'>" + data + "</a>"; } }, { "aTargets": [ 0 ], "mRender": function ( data, type, full ) { return "<input type='checkbox' value='"+full.resumeId+"' class='chkExportResume' />"; } }, { "aTargets": [ 10 ], "mRender": function ( data, type, full ) { return buildLink(data, type, full); } } ] });
resultDataTable.fnClearTable();
方法時,實際呼叫了一次fnDraw方法,該方法會呼叫Ajax請求,然後在DataTable的_fnInitialise方法中會再呼叫一次Ajax請求。
檢視Datatable發現fnClearTable方法實際上還有一個布林值引數來控制是否執行fnDraw方法,即只要把該語句修改為
resultDataTable.fnClearTable(false);
一切就OK了。
調查該問題Google了很久,最後還是通過看原始碼解決。不過,由此也看到Datatable作者在寫此外掛時,使用了很多優秀的程式設計方法,使得此外掛很容易使用和擴充套件。感謝他們的貢獻!
相關推薦
JQuery Datatable Ajax請求兩次問題的解決
最近一個專案中使用JQuery Datatable,用起來比較方便,但在測試過程中,發現當條件改變時,有時查詢結果中的資料不正確。 使用FireBug跟蹤時,發現在使用Ajax請求時,點選一次搜尋按鈕,卻傳送了兩次請求,一次是原條件的請求,一次是新的請求。 下面是查詢按鈕的
jquery easyui datagrid請求兩次或多次的問題解決方法
var $grid = $("#elementYEAR_datagrid"); $grid.datagrid({ nowrap: false, //一行顯示資料,提高載入效能true striped: true, //隔行換色 collapsible:false,//是否
Ajax 請求兩次第二次沒傳送
一個頁面中使用多個Ajax請求。 如果其中兩個Ajax引數(url、data)都一樣,會導致第二個請求沒有傳送去除,而是使用第一個請求的結果。 解決方法在引數後加上隨機數。 程式碼: function getData(jData, func) { $.ajax({
(Ext / Js) ajax 跨域請求傳送兩次解決方案
我的專案都是前後端分離,在用ajax請求的時候總是會發送兩次請求,一次OPTIONS(預檢請求),一次正常的POST(OR GET)。通過瀏覽器的開發者除錯工具(network)可以看到options請求不會帶上任何引數,返回null(其實返回值可以在後
####jquery click點選一次執行兩次解決方法【遇到】【解決(先接觸繫結,再繫結):$('#addImg').unbind('click').click(function () {})】
====專案例項: <%--$("body").on("click", "#toggle-button${activityDTO.id}", function (e) {--%> // 一次點選兩次觸發事件 <%--$("body").on("click", "#switc
點選按鈕一次,請求兩次問題解決
把程式碼: $("#conmmitBtn").click(function() {}); 改成: $("#conmmitBtn").off().on('click',function() {});
[置頂] jQuery傳送ajax請求,一次點選重複提交
問題描述: 前臺頁面 <input type="button" class="inputbutton" id="btnlogin" value="登入" /> show.js: $("#btnlogin").click(function(){ $.aj
後臺接口總是請求兩次
src bubuko 發送請求 ade php mage ons nbsp 不可 因為有自定的header所以不可完全使用簡單請求, 但是可以緩存cors信息來只需發送一次options請求。 後臺php 加上header(‘Access-Control-Max-Age
利用JQuery傳送ajax請求進行站內搜尋
前臺程式碼:(注意要匯入JQuery包,在lib中也要匯入gson-x.x.x.jar包) <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> &l
利用JQuery傳送ajax請求進行站內搜尋(Hibernate篇——超簡單系列)
此次任務是簡單的一次hibernate框架小訓練,利用上一篇的專案修改 1.導包,找到Hibernate-release-5.x.x.Final\lib\required下的所有包,copy到專案WEB-INF\lib下 2.開始編寫資料庫表(名字好煩,就亂取了) //建表h
使用jQuery傳送AJAX請求時在header中新增Token
在前後端分離開發中,使用者登入時迴向後臺請求一個令牌來做使用者的身份驗證,之後的每次請求中,HTTP請求頭都要攜帶上這個道理,我是閒的程式碼如下: $.ajax({ headers: { "token":userToken//此處放置請
原生ajax請求和jQuery的ajax請求
原生ajax請求 var name = document.getElementById('user'); var pwd= document.getElementById('pwd'); var btn= document.getElementById('btn'); btn.oncl
四十二、jQuery的ajax請求
一、Ajax請求方法 1.js原生ajax方法: /1.建立XHR物件 (伺服器互動物件) 注意相容 var ajax; if(window.XMLHttpRequest){ ajax=new XMLHttpRequest(); }else{
Android中RxJava使用4----請求兩次,第二次請求的引數是第一次請求的結果
思路: 1請求資料,根據使用者名稱和密碼,獲取User_id 2再請求資料,根據User_id,獲取使用者資訊 具體實現程式碼: 2.1、在build.gradle中新增依賴 compile 'com.jakewharton.rxbinding:rxbindin
ajax請求,亂碼解決方案
頁面設定 jsp頁面設定為utf-8 <%@ page language="java" import="java.util.*" pageEncoding="utf-8"%> html頁面的 <meta http-equiv="content
Android應用安裝完成後開啟應用出現初始化兩次解決方案
啟動介面加上 if (!isTaskRoot()) { finish(); return; } @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(
spring 定時任務執行兩次解決辦法
今天在做一個專案的時候用到了Spring的定時計劃任務。這是Spring的特色功能,可以根據設定在特定的時間或間隔時間做特定的事。下面給出一個例子:package net.csdn.blog.chaijunkukn; import java.text.SimpleDateF
對jquery的ajax進行二次封裝
程式碼如下(歡迎文明交流,留下寶貴建議,個人思路,不喜勿噴) function ajax(opt){ var defaultSettings = { data: {}, type: 'get', dataType: 'json', headers:{'Authoriza
AJAX 利用JQuery實現AJAX請求
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="JqueryAjax.aspx.cs" Inherits="XXX.WebApp.JqueryAjax" %> <!DOCTYPE h
jquery實現Ajax請求的三種方式
jquery 對 ajax的請求進行了封裝,可以使程式碼更簡潔,也自動替我們解決了,瀏覽器問題。 jquery 提供了三種 ajax 請求的函式,分別為: $.ajax() , $.get() ,