本文介绍了引导表显示不同于GoogleChrome和Firefox的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我使用引导表显示我的数据,它在谷歌Chrome上正常工作,但不能在Firefox上正常工作。
这是我看到的 google Chrome 。
这是我在 firefox 上看到的内容。
这是我的代码
echo<<< EOF
< div class =x_content>
< table id =exampleclass =table table-bordered table-hoverstyle ='font-size:13px;'&
< thead>
< tr height =10>
< th class =col-sm-1>#< / th>
< th class =col-sm-8>离开类别< / th>
< th>为活动< / th>
< th> Action< / th>
< / tr>
< / thead>
< tbody>
EOF;
$ this-> fetch(); //这是从数据库获取数据的函数
echo<<< EOF
< / div>
< / div>
< / div>
EOF;
javasript
< script>
var asInitVals = new Array();
$(document).ready(function(){
var oTable = $('#example')。dataTable({
oLanguage:{
sSearch 搜索所有列:
},
aoColumnDefs:[
{
'bSortable':false,
'aTargets':[0]
} //禁用第一列的排序
],
'iDisplayLength':12,
sPaginationType:full_numbers
} tumb输入)。keyup(function(){
/ *基于该元素的父索引的列筛选 * /
oTable.fnFilter(this.value,$( tfoot th)。index($(this).parent()));
});
$(tfoot input)。each(function(i){
asInitVals [ i] = this.value;
});
$(tfoot input)。focus(function(){
if(this.className ==search_init){
this.className =;
this.value =;
}
});
$(tfoot input)。blur(function(i){
if(this.value ==){
this.className =search_init;
this.value = asInitVals [$(tfoot input)。index(this)];
}
});
});
< / script>
如何更改css以正常工作?
<$ c $ c>< div class =container>它可以是容器或容器流体 - >
< div class =row> <! - 类似于上层 - >
< div class =col-md-12> <! - col-xs- *,col-md- *,col-lg- *
...
< / div>
< / div>
< / div>
检查Bootstrap文档,特别是网格:
I am using bootstrap table to display my data, and it work fine on Google Chrome, but cannot work fine on Firefox.
This is what i saw on google chrome.This is what i saw on firefox.
this is my code
echo<<<EOF
<div class="x_content">
<table id="example" class="table table-bordered table-hover" style='font-size:13px;'>
<thead>
<tr height="10">
<th class="col-sm-1">#</th>
<th class="col-sm-8">Leave Category</th>
<th>Is Active </th>
<th>Action</th>
</tr>
</thead>
<tbody>
EOF;
$this->fetch(); //this is the function to get data from database
echo<<<EOF
</div>
</div>
</div>
EOF;
javasript
<script>
var asInitVals = new Array();
$(document).ready(function () {
var oTable = $('#example').dataTable({
"oLanguage": {
"sSearch": "Search all columns:"
},
"aoColumnDefs": [
{
'bSortable': false,
'aTargets': [0]
} //disables sorting for column one
],
'iDisplayLength': 12,
"sPaginationType": "full_numbers"
});
$("tfoot input").keyup(function () {
/* Filter on the column based on the index of this element's parent <th> */
oTable.fnFilter(this.value, $("tfoot th").index($(this).parent()));
});
$("tfoot input").each(function (i) {
asInitVals[i] = this.value;
});
$("tfoot input").focus(function () {
if (this.className == "search_init") {
this.className = "";
this.value = "";
}
});
$("tfoot input").blur(function (i) {
if (this.value == "") {
this.className = "search_init";
this.value = asInitVals[$("tfoot input").index(this)];
}
});
});
</script>
How do I change the css to work fine on both?
解决方案
Bootstrap has it's dependencies when using the built-in grid.
<div class="container"> <!-- It can be either container or container-fluid -->
<div class="row"> <!-- Similar to the upper one -->
<div class="col-md-12"> <!-- col-xs-*, col-md-*, col-lg-* -->
...
</div>
</div>
</div>
Check the Bootstrap docs, especially the grid: Bootstrap
这篇关于引导表显示不同于GoogleChrome和Firefox的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!