


Detailliertes Verständnis der Front-End- und Front-End-Paging-Fuzzy-Abfrage des Bootstrap-Tabellen-Plug-Ins (2).
Dieser Artikel enthält hauptsächlich Hinweise zum Lernen von Bootstrap-Tabellen sowie Front-End- und Back-End-Paging-Fuzzy-Abfragen, die einen bestimmten Referenzwert haben.
Während der Verwendung lesen Sie ihn Dokument, ich werde sie hier aufzeichnen und eine Zusammenfassung erstellen:
1. Front-End-Paging
3 >
Das Front-End-Paging ist recht einfach. Als ich 20.000 Testdaten hinzufügte, öffnete es sich reibungslos und ohne Verzögerung.
Angesichts der Tatsache, dass es in Zukunft immer mehr Daten geben wird, kann Front-End-Paging die Anforderungen bei großen Datenmengen offensichtlich nicht erfüllen, daher muss Back-End-Paging durchgeführt werden
$(function(){ a(); }); function a () { $('#yourtable').bootstrapTable({ url: "/user/getUserList/", method:"post", dataType: "json", striped:true,//隔行变色 cache:false, //是否使用缓存 showColumns:false,// 列 pagination: true, //分页 sortable: false, //是否启用排序 singleSelect: false, search:false, //显示搜索框 buttonsAlign: "right", //按钮对齐方式 showRefresh:false,//是否显示刷新按钮 sidePagination: "client", //客户端处理分页 服务端:server pageNumber:"1", //启用插件时默认页数 pageSize:"15", //启用插件是默认每页的数据条数 pageList:[10, 25, 50, 100], //自定义每页的数量 undefinedText:'--', uniqueId: "id", //每一行的唯一标识,一般为主键列 queryParamsType:'', columns: [ { title: 'ID', field: 'id', align: 'center', valign: 'middle', }, { title: '用户姓名', field: 'name', align: 'center', valign: 'middle', }, { title: '性别', field: 'sex', align: 'center', }, { title: '用户账号', field: 'username', align: 'center', }, { title: '手机号', field: 'phone', align: 'center', }, { title: '邮箱', field: 'email', align: 'center', }, { title: '权限', field: 'rolename', align: 'center', }, { title: '操作', field: 'id', align: 'center', formatter:function(value,row,index){ //value 能够获得当前列的值 //==================================== var e = '<button href="#" class="btn btn-default" mce_href="#" onclick="edit(\''+ row.id + '\')">编辑</button> '; var d = '<button href="#" class="btn btn-default" mce_href="#" onclick="del(\''+ row.id +'\')">删除</button> '; return e+d; } } ] }); }
Hier die Parameter Die auf jeder Seite angezeigten Informationen werden in Nummer und mit der aktuellen Seitennummer übergeben. Wenn Sie eine Abfrage durchführen müssen, müssen Sie die abzufragenden Bedingungen übergeben.
//得到查询的参数 function queryParams (params) { var temp = { //这里的键的名字和控制器的变量名必须一直,这边改动,控制器也需要改成一样的 pageSize: params.pageSize, //页面大小 pageNumber: params.pageNumber, //页码 username: $("#search_username").val(), name:$("#search_name").val(), sex:$("#search_sex").val(), phone:$("#search_mobile").val(), email:$("#search_email").val(), }; return temp; };
$(function(){ a(); }); function a () { $('#userListTable').bootstrapTable({ url: "/user/getUserList/", method:"post", dataType: "json", contentType: "application/x-www-form-urlencoded", striped:true,//隔行变色 cache:false, //是否使用缓存 showColumns:false,// 列 toobar:'#toolbar', pagination: true, //分页 sortable: false, //是否启用排序 singleSelect: false, search:false, //显示搜索框 buttonsAlign: "right", //按钮对齐方式 showRefresh:false,//是否显示刷新按钮 sidePagination: "server", //服务端处理分页 pageNumber:"1", pageSize:"15", pageList:[10, 25, 50, 100], undefinedText:'--', uniqueId: "id", //每一行的唯一标识,一般为主键列 queryParamsType:'', queryParams: queryParams,//传递参数(*) columns: [ { title: 'ID', field: 'id', align: 'center', valign: 'middle', }, { title: '用户姓名', field: 'name', align: 'center', valign: 'middle', }, { title: '性别', field: 'sex', align: 'center', }, { title: '用户账号', field: 'username', align: 'center', }, { title: '手机号', field: 'phone', align: 'center', }, { title: '邮箱', field: 'email', align: 'center', }, { title: '权限', field: 'rolename', align: 'center', }, { title: '操作', field: 'id', align: 'center', formatter:function(value,row,index){ var e = ' '; var d = ' '; return e+d; } } ] }); //得到查询的参数 function queryParams (params) { var temp = { //这里的键的名字和控制器的变量名必须一直,这边改动,控制器也需要改成一样的 pageSize: params.pageSize, //页面大小 pageNumber: params.pageNumber, //页码 username: $("#search_username").val(), name:$("#search_name").val(), sex:$("#search_sex").val(), phone:$("#search_mobile").val(), email:$("#search_email").val(), }; return temp; }; } //搜索 function serachUser() { $("#userListTable").bootstrapTable('refresh'); }
contentType: "application/x -www- form-urlencoded", // Da die Bootstrap-Tabelle Ajax zum Abrufen von Daten verwendet, wird der Inhaltstyp der Anforderung standardmäßig auf text/plain gesetzt, sodass er nicht direkt über die @RequestParam-Parameterzuordnung auf dem Server abgerufen werden kann Seite.
und:
HTML:
Ob es das
Formular<p id="page-content" class="animated fadeInRight"> <p class="col-sm-4 col-md-3 col-lg-3" style="width: 100%;"> <form id="search_User"> <p class="panel-body search_box"> <p class="search_p"> <label for="search_name">用户姓名:</label> <input type="text" class="form-control" id="search_name" name="UserV2.name" > </p> <p class="search_p"> <label for="search_mobile">手机号:</label> <input type="text" class="form-control" id="search_mobile" name="UserV2.phone" > </p> <p class="search_p"> <label for="search_sex">性别:</label> <select class="form-control" id="search_sex" name="UserV2.sex"><option value="">---请选择---</option><option value="男">男</option><option value="女">女</option></select> </p> </p> <p class="panel-body search_box"> <p class="search_p"> <label for="search_name">用户账号:</label> <input type="text" class="form-control" id="search_username" name="UserV2.username" > </p> <p class="search_p"> <label for="search_name">用户Email:</label> <input type="text" class="form-control" id="search_email" name="UserV2.email" > </p> <p class="search_p" style="text-align: center;"> <input type="button" class="btn btn-primary btn_search" value="搜索" onclick="serachUser()"/> </p> </p> </form> </p> <table id="userListTable" ></table> </p>
Return Daten:
Wir möchten zwei Werte zurückgeben: Zeilen insgesamtZeilen:
Die von uns abgefragten DatenGesamt:
Gesamtdaten (diese Summe bezieht sich auf die Gesamtzahl aller Daten, nicht auf die Anzahl der einzelnen Seiten. Ich habe beispielsweise 100 Daten in der Benutzertabelle und mein Limit ist 0,15, also meine Es gibt 15 Daten in Zeilen, aber insgesamt = 100)Mit der Gesamtzahl plus der vorherigen Seitengröße und den vorherigen Zeilen generiert bootStraptable automatisch Elemente, die sich auf das Paging beziehen uns:
{ "total": 2, "rows": [ { "email": "39385908@qq.com", "id": 1, "name": "邓某某", "password": "", "phone": "12345678911", "rolename": "平台管理员", "sex": "男", "username": "admin" }, { "email": "2222@222.com", "id": 8, "name": "王小二1", "password": "", "phone": "13245678910", "rolename": "", "sex": "男", "username": "admin2" } ] }
[Verwandte Empfehlungen]
Kostenloses js-Online-Video-Tutorial
2 . JavaScript-Referenzhandbuch für Chinesisch
3. php.cn Dugu Jiujian (3) - JavaScript-Video-Tutorial
Das obige ist der detaillierte Inhalt vonDetailliertes Verständnis der Front-End- und Front-End-Paging-Fuzzy-Abfrage des Bootstrap-Tabellen-Plug-Ins (2).. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Heiße KI -Werkzeuge

Undresser.AI Undress
KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover
Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Undress AI Tool
Ausziehbilder kostenlos

Clothoff.io
KI-Kleiderentferner

AI Hentai Generator
Erstellen Sie kostenlos Ai Hentai.

Heißer Artikel

Heiße Werkzeuge

Notepad++7.3.1
Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version
Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1
Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6
Visuelle Webentwicklungstools

SublimeText3 Mac-Version
Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

Heiße Themen

Führen Sie Bootstrap in Eclipse in fünf Schritten ein: Laden Sie die Bootstrap-Datei herunter und entpacken Sie sie. Importieren Sie den Bootstrap-Ordner in das Projekt. Bootstrap-Abhängigkeit hinzufügen. Laden Sie Bootstrap CSS und JS in HTML-Dateien. Beginnen Sie mit der Verwendung von Bootstrap, um Ihre Benutzeroberfläche zu verbessern.

Schritte zur Einführung von Bootstrap in IntelliJ IDEA: Erstellen Sie ein neues Projekt und wählen Sie „Webanwendung“. Fügen Sie die Maven-Abhängigkeit „Bootstrap“ hinzu. Erstellen Sie eine HTML-Datei und fügen Sie Bootstrap-Referenzen hinzu. Ersetzen Sie ihn durch den tatsächlichen Pfad zur Bootstrap-CSS-Datei. Führen Sie die HTML-Datei aus, um Bootstrap-Stile zu verwenden. Tipp: Sie können ein CDN verwenden, um Bootstrap zu importieren oder HTML-Dateivorlagen anzupassen.

Interpretationsschritte des Bootstrap-Mediationseffekttests in Stata: Überprüfen Sie das Vorzeichen des Koeffizienten: Bestimmen Sie die positive oder negative Richtung des Mediationseffekts. Test-p-Wert: weniger als 0,05 zeigt an, dass die vermittelnde Wirkung signifikant ist. Überprüfen Sie die Konfidenzintervalle: Wenn sie nicht Null enthalten, bedeutet dies, dass der Mediationseffekt signifikant ist. Ein Vergleich des mittleren p-Werts: weniger als 0,05 untermauert die Bedeutung des Mediationseffekts zusätzlich.

Zu Llama3 wurden neue Testergebnisse veröffentlicht – die große Modellbewertungs-Community LMSYS veröffentlichte eine große Modell-Rangliste, die Llama3 auf dem fünften Platz belegte und mit GPT-4 den ersten Platz in der englischen Kategorie belegte. Das Bild unterscheidet sich von anderen Benchmarks. Diese Liste basiert auf Einzelkämpfen zwischen Modellen, und die Bewerter aus dem gesamten Netzwerk machen ihre eigenen Vorschläge und Bewertungen. Am Ende belegte Llama3 den fünften Platz auf der Liste, gefolgt von drei verschiedenen Versionen von GPT-4 und Claude3 Super Cup Opus. In der englischen Einzelliste überholte Llama3 Claude und punktgleich mit GPT-4. Über dieses Ergebnis war Metas Chefwissenschaftler LeCun sehr erfreut und leitete den Tweet weiter

Der Bootstrap-Test verwendet Resampling-Technologie, um die Zuverlässigkeit des statistischen Tests zu bewerten und die Signifikanz des Mediationseffekts zu beweisen: Berechnen Sie zunächst das Konfidenzintervall des direkten Effekts, des indirekten Effekts und des Mediationseffekts Mediationstyp nach der Baron- und Kenny- oder Sobel-Signifikanz und schließlich das Konfidenzintervall für den natürlichen indirekten Effekt schätzen.

Der Bootstrap-Mediationstest bewertet den Mediationseffekt durch mehrfaches erneutes Abtasten der Daten: Konfidenzintervall für indirekte Effekte: Gibt den geschätzten Bereich des Mediationseffekts an. Wenn das Intervall nicht Null enthält, ist der Effekt signifikant. p-Wert: Bewertet die Wahrscheinlichkeit, dass das Konfidenzintervall nicht Null enthält, wobei Werte unter 0,05 auf Signifikanz hinweisen. Stichprobengröße: Die Anzahl der für die Analyse verwendeten Datenproben. Bootstrap-Unterabtastzeiten: die Anzahl der wiederholten Abtastungen (500–2000 Mal). Wenn das Konfidenzintervall nicht Null enthält und der p-Wert kleiner als 0,05 ist, ist der Mediationseffekt signifikant, was darauf hinweist, dass die vermittelnde Variable die Beziehung zwischen der unabhängigen und der abhängigen Variablen erklärt.

Der Hauptunterschied zwischen Bootstrap und Spring Boot besteht darin, dass Bootstrap ein leichtes CSS-Framework für das Website-Design ist, während Spring Boot ein leistungsstarkes, sofort einsatzbereites Backend-Framework für die Entwicklung von Java-Webanwendungen ist. Bootstrap basiert auf CSS und HTML, während Spring Boot auf Java und dem Spring-Framework basiert. Bootstrap konzentriert sich auf die Erstellung des Erscheinungsbilds einer Website, während sich Spring Boot auf die Back-End-Funktionalität konzentriert. Spring Boot kann in Bootstrap integriert werden, um voll funktionsfähige und schöne Produkte zu erstellen

Exportieren Sie die Ergebnisse des Bootstrap-Mediation-Effekttests in Stata: Speichern Sie die Ergebnisse: Bootstrap-Post. Erstellen Sie eine Variablenliste: lokale Variablen: coef se ci. Exportieren Sie die Ergebnisse (CSV): exportieren Sie durch Trennzeichen getrennte Ergebnisse.csv, varlist(`vars') ersetzen Sie Komma und Nolabel
