bootstrap-tableの例

  

    

      

        

          

            

              
   
              
                      ...
              
            
          
          
              
        
      
      
      

  

    

      

       ×
       
      
      
      

       
        

           
         

          
                
          
         
        
        

            
         

          
         
        
        

           URL
         

          
         
        
        

           URL HEAD
         

          
         
        
       
      
      

          
          
         
      
    

  

 

  //todo1

  //todo2

3)scriptsコード:
//todo1
$('#mytab').bootstrapTable({
	url: 'url...',
	toolbar: "#toolbar",
	sidePagination: "false",
	striped: true, //         
	search : "true",
	showRefresh: true,
	showToggle:true,
	showColumns:true,
	showHeader:true,
	//uniqueId: "ID",
	pagination: false, //     
	sortable: false, //       
	dataField : "data",//ajax  json   ，   key
	columns: [{
			field: 'id',
			title: 'XXX'
		},{
			field: 'serviceId',
			title: 'XXX'
		},{
			field: 'interfaceName',
			title: 'XXX '
		},{
			field: 'interfaceUrl',
			title: 'XXX',
			formatter: function(value, row, index) {
				return "せつぞく";
			}
		},{
			field: 'header',
			title: 'XXX'
		},{
			field: 'operation',
			title: '  ',
			width: 120,
			align: 'center',
			valign: 'middle',
			formatter: function(value, row, index) {
				var result = "";
				result += "";
				result += "";
				result += "";
				return result;
			},
			events: {
				'click .btn_view': function(e, value, row, index) {
					EditViewById(row,0);
				},
				'click .btn_edit': function(e, value, row, index) {
					EditViewById(row,1);
				},
				'click .btn_del': function(e, value, row, index) {
					DelById(row);
				}
			}
		}
	]
});

$.ajax({
	url: "url...",
	type: "get",
	success:function(_data){
		if (_data.code == 'A00000') {
			var data = _data.data;
			for (var i = 0; i < data.length; i++) {
				$('#serviceId').append("" + data[i].serviceName + "");
			}
		} else {
			alert('          ');
			return;
		}
	},error:function() {
		alert('          ');
	}
});

イベント関数コード:
function func() {
	return false;
}
function searchProduct() {
	var sid = $('#search_service').val();
	var my_url = "url?serviceId="+sid;
	if ( sid === "0") {
		my_url = 'url2';
	}
	$.ajax({
		url: my_url,
		type: "get",
		success:function(_data){
			if (_data.code == 'A00000') {
				var data = _data.data;
				$("#mytab").bootstrapTable('load', data);
			} else {
				alert('          ');
				return;
			}
		},error:function() {
			alert('          ');
		}
	});
}

function check_form() {
	var serviceId = $.trim($('#serviceId').val());
	var interfaceName = $.trim($('#interfaceName').val());
	var interfaceUrl = $.trim($('#interfaceUrl').val());

	if(!interfaceName || !interfaceUrl){
		alert('      |  URL！');
		return;
	}
	if (serviceId === "0") {
		alert('     ！');
		return;
	}
	var header = $.trim($('#header').val());

	$.ajax({
		url: "url3",
		data:{"serviceId":serviceId,"interfaceName":interfaceName,"interfaceUrl":interfaceUrl,"header":header},
		type: "get",
		beforeSend:function(){
			$("#tip").html("    ...");
			return true;
		},
		success:function(data){
			if (data.code == 'A00000') {
				$("#tip").html("    ！");
				location.reload();
			} else if (data.code == 'E00002') {
				$("#tip").html("  ，          !");
				return;
			}else {
				$("#tip").html("  ，   ");
				return;
			}
		},error:function() {
			alert('    ');
		}
	});
}

2、データの再ロード:
ページが初期化されると、bootstrapTable構築方法を使用してリモートデータを直接ロードすることを知っています.しかし、クエリー条件が変更された場合、リモートからデータを再取得し、tableにデータをレンダリングする必要があります.構造方法で新しいテーブルをレンダリングすることはできません.bootstrapはloadメソッドを提供し、以下のようにします.
$('#table').bootstrapTable('load', newData);

3、その他の問題:
1)bootstrap table自動改行

{
	field: 'column_operate',
	title: '  ',
	formatter: function(value, row, index) {
		return ' を け';
	},
	events: {
		'click .say_hi': function(e, value, row, index) {
			alert(row.name + '   ');
		}
	}
}