layui+jquery支持IE8的表格分页

最新推荐文章于 2021-08-16 15:59:43 发布

CaesarJava

最新推荐文章于 2021-08-16 15:59:43 发布

阅读量1.5k

点赞数 2

分类专栏：前端文章标签： html ie 8 layui

本文链接：https://blog.csdn.net/qq_29950623/article/details/77500494

版权

本文介绍了如何在IE8环境下使用layui和jQuery实现表格分页。重点包括：1) 使用layui弹窗解决layer在IE8的兼容问题，通过添加meta标签调整；2) 注意jQuery版本的选择，需使用1.8.x版本以兼容layui；3) 解决IE8不支持特定jQuery append方法的问题，提供替代写法。

摘要由CSDN通过智能技术生成

工具（框架、插件）

1、 layui-v1.0.9

2、jquery-1.8.3

代码

1、jsp代码(可忽略jsp部分，转成html)

<%@ page language="java" contentType="text/html; charset=utf-8"%>
<%@ include file="/common/include/taglib.jsp"%>
<%
<html>
    <head>
        <title>test page</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
        <meta http-equiv="x-ua-compatible" content="ie=8" />
        <link rel="stylesheet" href="ad/layui/css/layui.css">
        <style>
            .left_buttons{float:left;margin-top:3px;}
            .search{float:right;margin-top:3px;}
            .dataTable{clear:both;}
            th{min-width:90px;text-align:center;}
            tfoot{text-align:center;}
            #modify{width:18px;padding:0 5 0 5;}
            #dlt{width:18px;padding:0 5 0 5;}
        </style>
    </head>
    <body>
        <div>
            <div class="top">
                <div class="left_buttons">
                    <span id="add" class="layui-btn layui-btn-primary" style="border:none;font-size:16"><i class="layui-icon"></i>button1</span>
                    <span class="layui-btn layui-btn-primary" style="border:none;font-size:16"><i class="layui-icon"></i>button2</span>
                </div>
                <div class="search">
                    <form class="layui-form search-input" action="">
                         <div class="layui-form-item layui-form-pane">
                           <label class="layui-form-label"><i class="layui-icon"></i></label>
                           <div class="layui-input-block" style="width:300px">
                             <input type="text" name="title" required  lay-verify="required" placeholder="请输入主题" autocomplete="off" class="layui-input" />
                           </div>
                         </div>
                    </form>
                </div>
            </div>
            <div class="dataTable">
                <div class="表格内容">
                    <table class="layui-table" lay-skin="line">
                      <colgroup>
                        <col width="150">
                        <