Explication détaillée de la liaison des données d'arrière-plan de la table BootStrap JavaScript, du traitement des colonnes spéciales et des fonctions de tri

Cette section présente principalement la liaison de données d'arrière-plan, les fonctions spéciales de traitement des colonnes et de tri des colonnes de Bootstrap Le code est simple et facile à comprendre, très bon et a une valeur de référence. .C'est nécessaire Mes amis, veuillez vous y référer

Cette section présente principalement la liaison de données en arrière-plan de Bootstrap, le traitement spécial des colonnes et les fonctions de tri des colonnes

1. >

Généralement, lors de la programmation, il est rare d'utiliser des fichiers

json pour lier directement des données. Fondamentalement, nous utilisons le langage de programmation pour obtenir des données et effectuer la liaison de données.

Placer une Table

contrôle

<table id="table" ></table>

Code pour appeler le

javascript

<script >
$(&#39;#table&#39;).bootstrapTable({
  url: &#39;tablejson.jsp&#39;,  //数据绑定，后台的数据从jsp代码
  search:true,      
  uniqueId:"Id",
  pageSize:"5",
  pageNumber:"1",
  sidePagination:"client",
  pagination:true,
  height:&#39;400&#39;,
  columns: [
  {
    field: &#39;Id&#39;,
    title: &#39;中文&#39;
  }, {
    field: &#39;Name&#39;,
    title: &#39;Name&#39;
  }
  , {
    field: &#39;Desc&#39;,
    title: &#39;Desc&#39;
  }
  ],
});

2. Traitement des colonnes spéciales

Dans les applications pratiques, nous devons ajouter nos colonnes spéciales, telles que les colonnes d'opération, voir le code js suivant pour ajouter une colonne spéciale

.

{
    field: '#',
    title: 'control',formatter:function(value,row,index){
    var del=&#39;<a href="Delete!delete.action?Id=&#39;+row.Id+&#39;" rel="external nofollow" rel="external nofollow" >删除</a>&#39;;
    var updt=&#39;<a href="supdate.jsp?Id=&#39;+row.Id+&#39;" rel="external nofollow" rel="external nofollow" >修改</a>&#39;;
    var add=&#39;<a href="Include.jsp?Id=&#39;+row.Id+&#39;" rel="external nofollow" rel="external nofollow" >增加</a>&#39;
    return del+" "+updt+"&nbsp"+add;
    }
  }

le code js est modifié en