layui 查詢無效問題

来源:https://www.cnblogs.com/xqz0618/archive/2019/07/04/layui_search.html
-Advertisement-
Play Games

【熱身話題】 在開發的過程中,大量數據的展示大多採用表格的方式,直觀,清晰。在這裡,我也使用過一些框架Bootstrap.table ,Dev table ,layui table。本次採用的layui table。用表格展示數據的同時會提供豐富的查詢條件去篩選相應的數據。由於大量的數據,一般都會使 ...


【熱身話題】

  在開發的過程中,大量數據的展示大多採用表格的方式,直觀,清晰。在這裡,我也使用過一些框架Bootstrap.table ,Dev table ,layui table。本次採用的layui table。用表格展示數據的同時會提供豐富的查詢條件去篩選相應的數據。由於大量的數據,一般都會使用分頁的形式去查詢數據,框架中帶有這種功能。

  【底部分頁欄效果圖】

  【上方查詢欄效果圖】

 

【問題來源】

  首次進入頁面或者頁數停留在第一頁使用查詢欄查詢時能夠查詢到數據。當分頁切換到第二頁時,再使用查詢欄查詢,可能查不到數據。(為什麼說是可能?後面會給出解釋)

 

【解決方法】

  在查詢提交參數時,添加一個參數 page:1 

       layui中通過where提交參數 where:{ search:{'USER_NAME':'汪菜菜'},page:1}

  註:此方法是通過問題分析,得出的有效方式,如有不對的地方或者有更好的方式歡迎指出

 

【問題解析】

  表格有自帶的分頁功能,後臺分頁主要是通過傳參 {limit:15,page:1} 兩個參數來控制分頁的分頁查詢。假設當前有三十條數據,則初始化表格時,顯示兩頁,總數30,頁數為1,數據源為1-15條數據。當我們添加查詢條件時,假設我通過模糊查詢 “汪” 能在 30 條數據中查詢到 10 條數據 ,當前頁數為第一頁,查詢的數據進行分頁{limit:15,page:1},10條數據取1-15條之內的,數據源也就是 10 條數據。此時我們把頁數切換到第二頁時,再通過相同的查詢條件去查詢,查詢數據還是為10條,分頁傳的參數還是{limit:15,page:2},10條數據取 16-30 之間的數據,然而總數據只有10條,行號在16-30之間無數據,雖然可以看到數據的總數為 10 ,但是沒有數據源,前臺顯示無數據,無數據也就無法初始化下方的分頁欄。為了保證能夠查詢數據,在點擊查詢按鈕時,自動將頁數指定為第一頁,這是返回無數據才是真正的無數據。

 

【引發思考】

  在問題分析中提到,當分頁切換到第二頁是查詢不到數據,那是因為通過模糊查詢條件查詢的數據只有10條,那麼如果查詢的數據有超過分頁的限制 {limit:15} ,即大於15條(前提是第二頁,同理第三頁時需要大於30條),是否能夠正常查詢出所有查詢數據?

  答案:是的。(這是在測試過程中得出的結論)

  【圖解】

    ①這是第一頁查詢2得出19條數據

      

    ②將查詢條件去掉,點擊到第二頁查詢到數據圖,和直接從上圖結果切換到第二頁的效果是相同的。 

      

    

您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • AXP209是一款高度集成的電源管理IC,為由單電池Li電池(Li-ion或Li-聚合物)供電且需要多P的應用提供了簡單靈活的電源解決方案也有輸出。它完全滿足了應用處理器在精確功率控制方面日益複雜的需求。 AXP209集成了一個自適應的、與usb相容的pwm充電器、兩個降壓轉換器(buck dc-d ...
  • 版權聲明:本文為xing_star原創文章,轉載請註明出處! 本文同步自http://javaexception.com/archives/167 Android Toolbar中的title居中問題 從Toolbar出來後,用Toolbar代替ActionBar越來越常見了。當然了也有App是自定 ...
  • " 1、JavaScript 的時間對象轉換為時間戳 " "1.1、時間對象轉時間戳的 5 種寫法" "1.2、獲得當前時間的時間戳" "1.3、獲得 10 位數的時間戳" " 2、JavaScript 的時間戳轉換為時間對象 " " 3、總結 " 1、JavaScript 的時間對象轉換為時間戳 ...
  • text-fill-color是什麼意思呢?單單從字面上來看就是“文本填充顏色”,不過它實際也是設置對象中文字的填充顏色,和color的效果很相似。如果同時設置text-fill-color和color兩個屬性,則text-fill-color會覆蓋掉color的值。 由於text-fill-col ...
  • 詳細請移步 智表(ZCELL)官網 www.zcell.net 更新說明 這次更新主要應用戶要求,主要解決了自定義右鍵菜單事件的支持,並新增了公式中自定義函數傳參、快捷鍵剪切等功能,歡迎大家體驗使用。 本次版本更新內容如下: 版本: V1.7發佈日期:2019-07-05 1.優化公式中的自定義函數 ...
  • 1. 格式與下載速度 當前,Web上用的最廣泛的三種格式是GIF、PNG和JPEG。我們的目標是選擇質量最高,同時文件最小的格式。 WebP圖像格式 谷歌建立了另一種圖像格式,名為WebP。 這種格式既支持有損壓縮也支持無損壓縮,它產生的文件大小也遠小於JPEG和PNG。跟PNG一樣,它還支持alp ...
  • Vue組件基礎 純屬隨筆記錄,具體詳細教程,請查閱vue.js網站 子組件給父組件傳值: 父組件給子組件傳值: 非父子組件間傳值: ` ...
  • 懶得發首頁了,有時候因為貼的代碼太多會被下,而且這東西本來也只是對自己學習的記錄,閱讀體驗極差,所以就本地自娛自樂的寫著吧! 由於是解析字元串,所以在開始之前介紹一下詞法結構體中關於管理字元串類的屬性。之前在TokenDesc中,有兩個屬性,如下。 當時沒有詳細講,主要也是比較麻煩,在這裡介紹一下該 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發(一):使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說,近來想嘗試開發一款安卓APP,考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP,畢竟是使用Visual Studio開發工具,使用起來也比較的順手,結合微軟官方的教程進行了安卓 ...
  • 前言 QuestPDF 是一個開源 .NET 庫,用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫,它徹底改變了我們生成 PDF 文檔的方 ...
  • 項目地址 項目後端地址: https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址: ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址: http://tree ...
  • 話不多說,直接開乾 一.下載 1.官方鏈接下載: https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe,運行開始下載SQL server; 二. ...
  • 前言 隨著物聯網(IoT)技術的迅猛發展,MQTT(消息隊列遙測傳輸)協議憑藉其輕量級和高效性,已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫,為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog支持多種接收器用於日誌存儲,增強器用於添加屬性,LogContext管理動態屬性,支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項,適用於不同需求。 ...
  • 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據,爬取信息時需要模擬瀏覽器行為,否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下: 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • 1.前言 什麼是熱更新 游戲或者軟體更新時,無需重新下載客戶端進行安裝,而是在應用程式啟動的情況下,在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR,Xlua,ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles,Addressable, ...
  • 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺,其實像阿裡雲,騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後,它會送 ...
  • 通過以下方式可以高效,並保證數據同步的可靠性 1.API設計 使用RESTful設計,確保API端點明確,並使用適當的HTTP方法(如POST用於創建,PUT用於更新)。 設計清晰的請求和響應模型,以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...