SmartPDCode/f407/tools/web/JS/pagination.js

const rowsPerPage = 15;
let currentPage = 1;
function populateTable(j_data,channel_power) {
    i = 0
    channel_data_length = channel_power.length
    const tableBody = document.getElementById('tbody');
    tableBody.innerHTML = ''; // 清空表格体
    const startIndex = (currentPage - 1) * rowsPerPage;
    const endIndex = startIndex + rowsPerPage;
    const pageData = channel_power.slice(startIndex, endIndex);
 
    // 创建一个新的列表项元素
    const listItem = document.createElement('tr');

    //自动生成设备名称列
    const Device_name_td = document.createElement('td');
    Device_name_td.textContent = "Smart PDU"
    Device_name_td.rowSpan = 3
    listItem.appendChild(Device_name_td);


    // pageData.forEach(item => {
    //   i++
    //   j = channel_data_length / 3
    //   // 创建一个新的列表项元素
    //   const listItem = document.createElement('tr');

    //   //自动生成设备名称列
    //   const Device_name_td = document.createElement('td');
    //   Device_name_td.textContent = "Smart PDU"
    //   listItem.appendChild(Device_name_td);

    //   //自动生成通道名称列
    //   const Chananl_name_td = document.createElement('td');
    //   Chananl_name_td.textContent = "CH"+j+"-"+"L"+i
    //   listItem.appendChild(Chananl_name_td);

    //   //自动生成通道名称列
    //   const Chananl_num_td = document.createElement('td');
    //   Chananl_num_td.textContent = j
    //   listItem.appendChild(Chananl_num_td);

    //   //自动生成相序列
    //   const xiangxu_td = document.createElement('td');
    //   xiangxu_td.textContent = "L"+i
    //   listItem.appendChild(xiangxu_td);

    //   // 自动生成电压列
    //   const voltage_td = document.createElement('td');
    //   voltage_data = item.voltage.toFixed(2);
    //   if(voltage_data <= 0)
    //   {
    //     voltage_data = 0
    //   }
    //   voltage_td.textContent = voltage_data
    //   listItem.appendChild(voltage_td);

    //   // 自动生成电流列
    //   const current_td = document.createElement('td');
    //   current_data = item.current.toFixed(2);
    //   if(current_data <= 0)
    //   {
    //     current_data = 0
    //   }
    //   current_td.textContent = current_data;
    //   listItem.appendChild(current_td);

    //   // 自动生成功率列
    //   const power_td = document.createElement('td');
    //   power_data = item.power.toFixed(2);
    //   if(power_data <= 0)
    //   {
    //     power_data = 0
    //   }
    //   power_td.textContent = power_data
    //   listItem.appendChild(power_td);

    //   // 自动生成频率列
    //   const freq_td = document.createElement('td');
    //   freq_data = item.power.toFixed(2);
    //   if(freq_data <= 0)
    //   {
    //     freq_data = 0
    //   }
    //   freq_td.textContent = freq_data
    //   listItem.appendChild(freq_td);

    //   // 自动生成耗电量列
    //   const consump_td = document.createElement('td');
    //   consump_data = item.consump.toFixed(2);
    //   if(consump_data <= 0)
    //   {
    //     consump_data = 0
    //   }
    //   consump_td.textContent = consump_data
    //   listItem.appendChild(consump_td);

    //   // 自动生成功率因数列
    //   const factor_td = document.createElement('td');
    //   factor_data = item.factor.toFixed(2);
    //   if(factor_data <= 0)
    //   {
    //     factor_data = 0
    //   }
    //   factor_td.textContent = factor_data
    //   listItem.appendChild(factor_td);

    //   // 自动生成开启延时列
    //   const open_td = document.createElement('td');
    //   open_td.textContent = 0;
    //   listItem.appendChild(open_td);

    //   // 自动生成关闭延时列
    //   const close_td = document.createElement('td');
    //   close_td.textContent = 0;
    //   listItem.appendChild(close_td);       

    //   // 自动生成状态列
    //   const status_td = document.createElement('td');
    //   channel_status = item.status
    //   listItem.appendChild(status_td);

    //   if(channel_status == 1)
    //   {
    //       status_td.textContent = '接通';
    //       // 自动生成关闭按钮列
    //       const close_button_td = document.createElement('button');
    //       close_button_td.textContent = '关闭';
    //       close_button_td.id = `Button_close_ ${i}`;
    //       close_button_td.addEventListener('click', function() {
    //           const userConfirmed = confirm('是否确定关闭该通道');
    //           if (userConfirmed) {
    //               single_close(j_data,channel_power_infro,channel_infro)
    //           } else {
    //               alert('已取消关闭通道');
    //           }
    //       });
    //       listItem.appendChild(close_button_td);
    //   }else{
    //       status_td.textContent = '断开';
    //       // 自动生成开启按钮列
    //       const open_button_td = document.createElement('button');
    //       open_button_td.id = `Button_open_ ${i}`;
    //       open_button_td.textContent = '开启';
    //       open_button_td.addEventListener('click', function() {
    //           const userConfirmed = confirm('是否确定开启该通道');
    //           if (userConfirmed) {
    //             single_open(j_data,channel_power_infro,channel_infro)
    //           } else {
    //               alert('已取消开启通道');
    //           }
    //       });
    //       listItem.appendChild(open_button_td);
    //   }
    //   // 自动生成输出类型列
    //   const input_type_td = document.createElement('td');
    //   input_type_td.textContent = '三相';

    //   listItem.appendChild(input_type_td);
    //   tableBody.appendChild(listItem);
    // });
    // updatePagination(channel_data_length)
}

function updatePagination(totalRows) {
    totalRows = channel_data_length
    const pagination = document.getElementById('page2_pagination');
    pagination.innerHTML = ''; // 清空表格体
    const totalPages = Math.ceil(totalRows / rowsPerPage);
 
    for (let i = 1; i <= totalPages; i++) {
      const button = document.createElement('button');
      button.style.width = "5%";
      button.style.height = "100%";
      button.textContent = i;
      button.disabled = i === currentPage; // 禁用当前页按钮（可选）
      button.onclick = () => {
        currentPage = i;
        populateTable(channel_power);
        updatePagination(totalRows, rowsPerPage); // 重新渲染分页按钮以反映当前页码（可选，但推荐）
      };
      pagination.appendChild(button);
    }
  }