liuhairui
/
ym.7in6.com


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330
							<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>入库明细列表</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        body {
            font-family: "微软雅黑", sans-serif;
            padding: 20px;
            background: #f9f9f9;
        }

        h2 {
            margin-bottom: 20px;
            color: #333;
        }

        #searchInput {
            padding: 8px;
            width: 300px;
            font-size: 14px;
            margin-bottom: 20px;
            border: 1px solid #ccc;
            border-radius: 4px;
        }
        #q_btn{
            padding: 8px;
            font-size: 14px;
            margin-bottom: 20px;
            border: 1px solid #ccc;
            border-radius: 4px;
            background-color: #18bc9c;
            color: #fff;
        }

        .scroll-table-wrapper {
            max-height: 400px;
            overflow-y: auto;
            border: 1px solid #ddd;
            background: white;
        }

        table {
            width: 100%;
            border-collapse: collapse;
            table-layout: fixed;
        }

        th, td {
            border: 1px solid #ddd;
            text-align: center;
            font-size: 14px;
            padding: 5px;
            word-break: break-word;
        }

        thead th {
            background: #f0f0f0;
            position: sticky;
            top: 0;
            z-index: 2;
        }

        tbody tr:hover {
            background: #f5f5f5;
        }

        tr.selected {
            background-color: yellow !important;
        }

        #pagination-wrapper {
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-wrap: wrap;
            margin-top: 20px;
            font-size: 14px;
        }

        #pagination-controls {
            display: flex;
            align-items: center;
            flex-wrap: wrap;
        }

        #pagination-controls button {
            padding: 6px 10px;
            margin: 0 2px;
            cursor: pointer;
            border: 1px solid #ccc;
            background: white;
            border-radius: 4px;
        }

        #pagination-controls button.active {
            background: #4CAF50;
            color: white;
            border-color: #4CAF50;
        }

        #pagination-controls button:disabled {
            background: #eee;
            color: #aaa;
            cursor: not-allowed;
        }

        #pageSize {
            margin: 0 5px;
            padding: 4px 6px;
        }

        .ellipsis {
            padding: 6px 10px;
            color: #999;
        }
        /* 按钮基础样式（可选美化） */
        .btn-refresh {
            font-size: 18px;
            color: #fff;
            cursor: pointer;
        }

        /* 旋转动画类 */
        .rotating {
            animation: spin 1s linear infinite;
        }

        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }
    </style>
</head>
<body>

<h2>入库明细列表</h2>
<a href="javascript:;" class="btn btn-primary btn-refresh" title="刷新">
    <i class="fas fa-sync-alt"></i> <!-- 这是刷新图标 -->
</a>
<input type="text" id="searchInput" placeholder="搜索产品名称..." />
<div class="scroll-table-wrapper">
    <table id="productTable">
        <thead>
        <tr>
            <th style="width: 4%"><input type="checkbox" id="checkAll"></th>
            <th style="width: 10%">产品代号</th>
            <th style="width: 30%">产品名称</th>
            <th style="width: 10%">数量</th>
            <th style="width: 10%">入库状态</th>
        </tr>
        </thead>
        <tbody id="tableBody">
        <!-- JS 动态渲染数据 -->
        </tbody>
    </table>
</div>

<div id="pagination-wrapper">
    <div id="pagination-info">共 0 条记录，第 1 / 1 页</div>
    <div id="pagination-controls">
        每页显示：
        <select id="pageSize">
            <option value="10">10</option>
            <option value="20" selected>20</option>
            <option value="50">50</option>
        </select> 条
    </div>
</div>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">
<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script>
    $(document).on('click', '.btn-refresh', function () {
        currentPage = 1; // 可选：回到第一页
        loadData(currentPage, searchKey); // 带着当前搜索关键字刷新
    });
    $(document).on('click', '.btn-refresh', function () {
        var $icon = $(this).find('i');

        // 添加旋转动画
        $icon.addClass('rotating');

        // 模拟刷新数据（这里调用你的表格刷新函数）
        loadData(); // 真实刷新

        // 假设刷新完毕后停止旋转（用 AJAX 完成后去除）
        setTimeout(function () {
            $icon.removeClass('rotating');
        }, 1000); // 假设1秒刷新完成
    });
    let currentPage = 1;
    let searchKey = '';
    let pageSize = parseInt($('#pageSize').val());

    function loadData(page = 1, search = '') {
        pageSize = parseInt($('#pageSize').val());

        $.ajax({
            method: "GET",
            url: "Inventorydetails/index",
            data: { page: page, search: search, limit: pageSize },
            success: function (res) {
                const tbody = $('#tableBody');
                tbody.empty();
                $('#checkAll').prop('checked', false); // 每次刷新取消“全选”

                if (res.data && res.data.length > 0) {
                    res.data.forEach(row => {
                        tbody.append(`<tr>
                            <td><input type="checkbox" class="row-check"></td>
                            <td>${row.jjcp_cpdh}</td>
                            <td>${row.jjcp_cpmc}</td>
                            <td>${row.jjcp_sl}</td>
                            <td>${row.jjcp_smb}</td>
                        </tr>`);
                    });
                } else {
                    tbody.append('<tr><td colspan="5">暂无数据</td></tr>');
                }

                renderPaginationInfo(res.total, res.page, res.limit);
                renderPagination(res.total, res.page, res.limit);
            },
            error: function () {
                console.log("加载数据失败！");
            }
        });
    }

    function renderPaginationInfo(total, page, limit) {
        const totalPages = Math.ceil(total / limit);
        $('#pagination-info').text(`共 ${total} 条记录，第 ${page} / ${totalPages} 页`);
    }

    function renderPagination(total, current, limit) {
        const totalPages = Math.ceil(total / limit);
        current = parseInt(current);
        const container = $('#pagination-controls');
        container.find('button, .ellipsis').remove();

        const addButton = (text, pageNum, isActive = false, isDisabled = false) => {
            const btn = $('<button>')
                .text(text)
                .prop('disabled', isDisabled)
                .addClass(isActive ? 'active' : '')
                .click(() => {
                    if (!isDisabled && pageNum !== current) {
                        currentPage = pageNum;
                        loadData(currentPage, searchKey);
                    }
                });
            container.append(btn);
        };

        addButton('上一页', current - 1, false, current === 1);

        const pages = [];
        if (totalPages <= 5) {
            for (let i = 1; i <= totalPages; i++) pages.push(i);
        } else {
            if (current <= 3) {
                pages.push(1, 2, 3, 4, 5, '...', totalPages);
            } else if (current >= totalPages - 2) {
                pages.push(1, '...');
                for (let i = totalPages - 4; i <= totalPages; i++) pages.push(i);
            } else {
                pages.push(1, '...', current - 1, current, current + 1, '...', totalPages);
            }
        }

        let prev = null;
        pages.forEach(p => {
            if (p === '...') {
                if (prev !== '...') {
                    container.append('<span class="ellipsis">...</span>');
                    prev = '...';
                }
            } else {
                addButton(p, p, p === current);
                prev = p;
            }
        });

        addButton('下一页', current + 1, false, current === totalPages);
    }

    // 行点击切换勾选 + 高亮
    $(document).on('click', '#productTable tbody tr', function (e) {
        if (!$(e.target).is('input')) {
            const checkbox = $(this).find('.row-check');
            checkbox.prop('checked', !checkbox.prop('checked'));
        }
        $(this).toggleClass('selected');
    });

    // 勾选框勾选联动行背景
    $(document).on('change', '.row-check', function () {
        const tr = $(this).closest('tr');
        tr.toggleClass('selected', $(this).is(':checked'));
    });

    // 全选/取消全选
    $('#checkAll').on('change', function () {
        const checked = $(this).is(':checked');
        $('.row-check').prop('checked', checked);
        $('#productTable tbody tr').each(function () {
            $(this).toggleClass('selected', checked);
        });
    });

    $('#searchInput').on('input', function () {
        searchKey = $(this).val();
        currentPage = 1;
        loadData(currentPage, searchKey);
    });

    $('#pageSize').on('change', function () {
        currentPage = 1;
        loadData(currentPage, searchKey);
    });

    $(document).ready(function () {
        loadData();
    });
</script>

</body>
</html>