suchen
HeimWeb-FrontendHTML-TutorialUmgang mit Bootstrap-Table-Server-Verarbeitungs-Paging

Umgang mit Bootstrap-Table-Server-Verarbeitungs-Paging

Oct 19, 2017 am 10:00 AM
bootstraptable服务

Um zu berücksichtigen, dass die Funktion wiederverwendet (aufgerufen) werden kann, müssen die veränderbaren Parameter gekapselt werden.


function HQCreatTables(ob) {    
            var option = {
        method: 'get',
        dataType: "json",
        striped: true,//设置为 true 会有隔行变色效果  
        undefinedText: "空",//当数据为 undefined 时显示的字符  
        pagination: true, //分页  
        // paginationLoop:true,//设置为 true 启用分页条无限循环的功能。  
        showToggle: false,//是否显示 切换试图(table/card)按钮  
        showColumns: false,//是否显示 内容列下拉框  
        pageNumber: 1,//如果设置了分页,首页页码  
        // showPaginationSwitch:true,//是否显示 数据条数选择框  
        pageSize: 10,//如果设置了分页,页面数据条数  
        pageList: [10, 20, 40],  //如果设置了分页,设置可供选择的页面数据条数。设置为All 则显示所有记录。  
        paginationPreText: &#39;?&#39;,//指定分页条中上一页按钮的图标或文字,这里是<  
        paginationNextText: &#39;?&#39;,//指定分页条中下一页按钮的图标或文字,这里是>  
        // singleSelect: false,//设置True 将禁止多选  
        search: false, //显示搜索框  
        data_local: "zh-US",//表格汉化  
        sidePagination: "server", //服务端处理分页  
        queryParams: function (params) {//自定义参数,这里的参数是传给后台的,我这是是分页用的 
            return {//这里的params是table提供的  
                cp: params.offset,//从数据库第几条记录开始  
                ps: params.limit//找多少条              };
        }
    }    if (ob.url) {
        option.url = ob.url;
    }    if (ob.columns) {
        option.columns = ob.columns;
    }
    $(ob.id).bootstrapTable(&#39;destroy&#39;);
    $(ob.id).bootstrapTable(option);    if (ob.data) {
        $(ob.id).bootstrapTable(&#39;load&#39;, ob.data);
    }
    $(ob.id).on(&#39;load-success.bs.table&#39;, function (data) {//table加载成功后的监听函数  
        var $table = $(ob.id);        var allTableData = JSON.stringify($table.bootstrapTable(&#39;getData&#39;));//获取表格的所有内容行
        var obj = JSON.parse(allTableData);
        console.log(obj)
        Xstate.TableArr = obj;
    });
}

Tabelle lädt die erfolgreich geschriebene Funktion, die ich geschrieben habe weil ich es brauchte. Nachdem die Daten in globalen Variablen in der Tabelle platziert wurden, ist es nicht erforderlich, Ajax zum Abfragen detaillierter Informationen zu verwenden.
Ich habe immer noch ein Problem mit dieser API „load-success.bs.table“. Wenn diese Tabelle mehrmals erfolgreich geladen wird, wird diese Funktion gleich oft ausgeführt, ohne die Seitenanzeigefunktion zu beeinträchtigen. Aber ich verstehe immer noch nicht, warum die vorherige Tabelle durch $(ob.id).bootstrapTable('destroy') zerstört wurde und warum sie immer noch aufgezeichnet wird.
Wenn die Funktion aufgerufen wird, schreiben Sie ihre eigenen Parameter und Spalten ist die Überschrift der ersten Zeile.


var tab = { id: &#39;#Table&#39;, url: &#39;/HealthRecords/Selects&#39;, columns: columns }
HQCreatTables(tab);

Der im Hintergrund von .net übergebene JSON muss auch einen Seitenwert haben, rows sind Ihre Anzeigedaten und total: die Anzahl aller angezeigten Daten.


[HttpGet]        
//GET: HealthRecords        
public JsonResult Selects(HealthRecordView m, int cp = -4, int ps = -5, string start = null, string end = null)
        {            string sa = Session["hid"].ToString();
            m.hid = sa;            
            string sqls = " SELECT * from A where hid=&#39;" + m.hid + "&#39;  ";            
            string sqlss = " SELECT count(*) from A where hid=&#39;" + m.hid + "&#39; ";            
            if (!string.IsNullOrWhiteSpace(m.Name))
            {
                sqls += " and Name like &#39;%" + m.Name + "%&#39;";
                sqlss += " and Name like &#39;%" + m.Name + "%&#39;";
            }            if (!string.IsNullOrWhiteSpace(start) && !string.IsNullOrWhiteSpace(end))
            {
                sqls += " and r_time > &#39;" + start + "&#39; and r_time <&#39;" + end + "&#39;";
                sqlss += " and r_time > &#39;" + start + "&#39; and r_time <&#39;" + end + "&#39;";
            }
            sqls += " order by r_time desc ";            
            if (cp != -4&& ps != -5)
            {
                sqls += "  limit  "+ cp + "," + ps + " ";
            }
            
            var arr = db.Database.SqlQuery<HealthRecordView>(sqls).ToArray();            
            int RoleNames = db.Database.SqlQuery<int>(sqlss).FirstOrDefault();            
            return Json(new { page = cp, rows = arr, total = RoleNames }, JsonRequestBehavior.AllowGet);
        }

Übergeben Sie wie oben nicht die Hintergrunddaten und schränken Sie die Tabelle nicht mit mehr Bedingungen in einer Generation ein.
So geht's Abfragebedingungen: Wie geht das?

Wenn Sie das Bild sehen, werden Sie verstehen, dass Sie beim Aufruf der Funktion nur Ihre Abfragebedingungen zur URL hinzufügen müssen.

Das obige ist der detaillierte Inhalt vonUmgang mit Bootstrap-Table-Server-Verarbeitungs-Paging. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Die Vielseitigkeit von HTML: Anwendungen und AnwendungsfälleDie Vielseitigkeit von HTML: Anwendungen und AnwendungsfälleApr 30, 2025 am 12:03 AM

HTML ist nicht nur das Skelett von Webseiten, sondern wird auch in vielen Bereichen häufiger verwendet: 1. In der Webseitenentwicklung definiert HTML die Seitenstruktur und kombiniert CSS und JavaScript, um reichhaltige Schnittstellen zu erreichen. 2. In der Entwicklung der mobilen Anwendungen unterstützt HTML5 Offline -Speicher- und Geolokationsfunktionen. 3. In E -Mails und Newslettern verbessert HTML das Format- und Multimedia -Effekte von E -Mails. 4. In der Spielentwicklung wird die Canvas -API von HTML5 verwendet, um 2D- und 3D -Spiele zu erstellen.

Was ist das Root -Tag in einem HTML -Dokument?Was ist das Root -Tag in einem HTML -Dokument?Apr 29, 2025 am 12:10 AM

Theroottaginanhtmldocumentis.itServesasthetop-LevelelementthateCapsulatesAllotherContent, um ProperDocumentStructureandBrowserParsing zu gewährleisten.

Sind die HTML -Tags und Elemente dasselbe?Sind die HTML -Tags und Elemente dasselbe?Apr 28, 2025 pm 05:44 PM

Der Artikel erklärt, dass HTML -Tags Syntaxmarker sind, die zum Definieren von Elementen verwendet werden, während Elemente vollständige Einheiten einschließlich Tags und Inhalt sind. Sie arbeiten zusammen, um Webseiten zu strukturieren.Character Count: 159

Welche Bedeutung hat der Kopf & gt; und & lt; Körper & gt; Tag in HTML?Welche Bedeutung hat der Kopf & gt; und & lt; Körper & gt; Tag in HTML?Apr 28, 2025 pm 05:43 PM

Der Artikel erörtert die Rollen von & lt; Head & gt; und & lt; Körper & gt; Tags in HTML, ihre Auswirkungen auf die Benutzererfahrung und die SEO -Auswirkungen. Die ordnungsgemäße Strukturierung verbessert die Funktionen der Website und die Suchmaschinenoptimierung.

Was ist der Unterschied zwischen & lt; stark & ​​gt;, & lt; b & gt; Tags und & lt; em & gt;, & lt; i & gt; Tags?Was ist der Unterschied zwischen & lt; stark & ​​gt;, & lt; b & gt; Tags und & lt; em & gt;, & lt; i & gt; Tags?Apr 28, 2025 pm 05:42 PM

Der Artikel erörtert die Unterschiede zwischen HTML -Tags, und sich auf ihre semantischen und präsentierenden Verwendungen und ihre Auswirkungen auf SEO und Barrierefreiheit konzentrieren.

Bitte erklären Sie, wie Sie den Zeichensatz angeben, der von einem Dokument in HTML verwendet wird.Bitte erklären Sie, wie Sie den Zeichensatz angeben, der von einem Dokument in HTML verwendet wird.Apr 28, 2025 pm 05:41 PM

In Artikel wird die Angabe der Charaktercodierung in HTML erläutert, die sich auf UTF-8 konzentriert. Hauptproblem: Sicherstellen, dass die korrekte Anzeige des Textes verstümmelt und die SEO und die Zugänglichkeit verbessert werden.

Was sind die verschiedenen Formatierungs -Tags in HTML?Was sind die verschiedenen Formatierungs -Tags in HTML?Apr 28, 2025 pm 05:39 PM

In dem Artikel werden verschiedene HTML -Formatierungs -Tags erörtert, die zur Strukturierung und Styling -Webinhalte verwendet werden, wodurch ihre Auswirkungen auf das Erscheinungsbild von Text und die Bedeutung semantischer Tags für Barrierefreiheit und SEO betont werden.

Was ist der Unterschied zwischen dem Attribut 'ID' und dem Attribut 'Klasse' von HTML -Elementen?Was ist der Unterschied zwischen dem Attribut 'ID' und dem Attribut 'Klasse' von HTML -Elementen?Apr 28, 2025 pm 05:39 PM

Der Artikel erörtert die Unterschiede zwischen den Attributen von HTMLs "ID" und "Klasse" und konzentriert sich auf ihre Einzigartigkeit, ihren Zweck, ihre CSS -Syntax und ihre Spezifität. Es erklärt, wie sich ihre Verwendung auf das Webseite und die Funktionalität des Webseite auswirkt, und bietet Best Practices für

See all articles

Heiße KI -Werkzeuge

Undresser.AI Undress

Undresser.AI Undress

KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover

AI Clothes Remover

Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Undress AI Tool

Undress AI Tool

Ausziehbilder kostenlos

Clothoff.io

Clothoff.io

KI-Kleiderentferner

Video Face Swap

Video Face Swap

Tauschen Sie Gesichter in jedem Video mühelos mit unserem völlig kostenlosen KI-Gesichtstausch-Tool aus!

Heiße Werkzeuge

Dreamweaver CS6

Dreamweaver CS6

Visuelle Webentwicklungstools

SAP NetWeaver Server-Adapter für Eclipse

SAP NetWeaver Server-Adapter für Eclipse

Integrieren Sie Eclipse mit dem SAP NetWeaver-Anwendungsserver.

PHPStorm Mac-Version

PHPStorm Mac-Version

Das neueste (2018.2.1) professionelle, integrierte PHP-Entwicklungstool

Herunterladen der Mac-Version des Atom-Editors

Herunterladen der Mac-Version des Atom-Editors

Der beliebteste Open-Source-Editor

Sicherer Prüfungsbrowser

Sicherer Prüfungsbrowser

Safe Exam Browser ist eine sichere Browserumgebung für die sichere Teilnahme an Online-Prüfungen. Diese Software verwandelt jeden Computer in einen sicheren Arbeitsplatz. Es kontrolliert den Zugriff auf alle Dienstprogramme und verhindert, dass Schüler nicht autorisierte Ressourcen nutzen.