jquery 一些方法使用(保留小数、for in 、datatable渲染特殊数据)

最新推荐文章于 2023-10-13 11:16:05 发布

青梅煮酒论英雄

最新推荐文章于 2023-10-13 11:16:05 发布

阅读量1k

点赞数

分类专栏：前端css js jq 文章标签：前端jq 插件使用

本文链接：https://blog.csdn.net/this_tall_people/article/details/79071695

版权

js 同时被 3 个专栏收录

44 篇文章 0 订阅

订阅专栏

24 篇文章 0 订阅

订阅专栏

前端css

13 篇文章 0 订阅

订阅专栏

一、保留小数、向上取整

toFixed(999.99) 999.9
Math.ceil(999.99) 1000
parseInt(999.99) 999

二、for in使用

i=0;
for(key in array)
  if(key ！="" && i>0)
     $('.'+key).html(array[key]);
i++;

三、datatable 插件处理后端数据及增加排序功能及冻结表格列

     var TbodyLength =20
     var options = {
        "pagingType": "input",
         "oLanguage": {
                    "sZeroRecords":$.i18n.prop(''),
                    "oPaginate": {
                        "sFirst": $.i18n.prop(''),
                        "sPrevious": $.i18n.prop(''),
                        "sNext": $.i18n.prop(''),
                        "sLast": $.i18n.prop('')
                    }
               },
        "order": [],
        "ordering":true,
        // "retrieve": true,
        "destroy": true,
        "searching": true,
        "bFilter": false,
        "sDom": '<"H"lr>t<"F"ip>',
        "bDestory": true,
        "bAutoWidth": false,
        "bLengthChange": false,
        "displayLength": 8,
        "bSort": true,
        "scrollX": true,
        "bPaginate": true,
        "columnDefs": [
 { "targets": [3], //隐藏第六列,从第0列开始
              "visible": false } ,
                      "fixedColumns":{      //冻结列,需要fixedColumns插件
    "leftColumns":0,
"rightColumns":1
},
        {
   'targets': [0,5],  //除第0，第5两列外，都默认不排序
   'orderable': false
    },
            {
                    "render": function (data, type, row, rowcol) {
                          return '<img class="imgdetail" src="img/map/r2_c2.png"   title="' + row.area_id + '"  lon="' + row.lon + '" lat="' + row.lat + '"/  >';
                    }, "targets": [5]
            },
                        {
                    "render": function (data, type, row, rowcol) {
                        return '<span class="overHide"  title="' + data + '"  >'+data+'</span>';
                    }, "targets": [0]
            },
            {
                    "render": function (data, type, row, rowcol) {
                         if(data !='--')
                        return '<span class="overHide"  title="' + data + '"  >'+data+'%'+'</span>';  else  return data; 
                    }, "targets": [1]
            },
            {
                    "render": function (data, type, row, rowcol) {
                        return '<span class="overHide"  title="' + data + '"  >'+data+'</span>';
                    }, "targets": [2]
            },
            {
                    "render": function (data, type, row, rowcol) {
                        return '<span class="overHide"  title="' + data + '"  >'+data+'</span>';
                    }, "targets": [3]
            },
            {
                    "render": function (data, type, row, rowcol) {
                        return '<span class="overHide"  title="' + data + '"  >'+data+'</span>';
                    }, "targets": [4]
            }




    ]
    }
    options.data = data
    options.columns= [
            { data: 'area_id' },
            { data: 'qoegoodratio' },
            { data: 'poorqoegridnum' },
            { data: 'poorcoveragegridnum' },
            { data: 'totaldatavolume'}


        ];
     $("#myTable_cover").dataTable(options);

四、复选框是否被选中

$('#checkbox-id').is(':checked') == true

五、bootstrap 使用tab切换

引入bootstrap插件 class名和id名必须要一致
其他杨树可以自己引入即可

<ul id="myTab" class="nav nav-tabs">
     <li class="active">
        <a href="#tabOneCell1" data-toggle="tab">
        </a>
     </li>
     <li>
         <a href="#tabOneCell2" data-toggle="tab"">
         </a>
     </li>
     <li>
        <a href="#tabOneCell3" data-toggle="tab">
        </a>
     </li>
</ul>
<!-- 左侧leftBox 标题 -->
<div class="tab-content" id="myTabContent" style="position: relative;">
     <div class="tab-pane fade active in" id="tabOneCell1">
        <div id="div_RsrpCustomAreaTable">                                                                                        <table id="myTable_fell">
</table>
       </div>
</div>
<div class="tab-pane fade" id="tabOneCell2" >
<div id="div_RsrpCustomAreaTable">
                                                                                 <table id="myTable_cover">
   </table>
</div>
 </div>
<div class="tab-pane fade" id="tabOneCell3">
 <div id="regionTable" >
  <table id="myTable">
  </table>
</div>
 </div>
 </div>