本文介绍了引导表显示不同于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的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

08-20 04:33
查看更多