原生javascript实现简单的datagrid数据表格

请看下面的攻略：

一、什么是DataGrid数据表格

DataGrid数据表格是Web应用程序中常见的一种显示和编辑数据的方式。它通常由多个数据列和若干行组成，每一个单元格可以编辑文本、选项、日期等不同类型的数据。

二、实现DataGrid数据表格的基本思路

我们可以借助HTML的<table>标签来实现数据表格的显示和基本布局，然后用原生Javascript来实现数据的加载、筛选、排序和分页等功能。

1. 加载数据

我们可以通过Ajax从服务端获取数据，或者直接使用已有的静态数据，然后将数据填充到表格的每一行中。具体实现可以采用如下的步骤：

创建一个<table>标签，定义好表格的样式和布局；
创建一个空的<tbody>标签，用于后续动态添加行；
使用Ajax或者其他方式获取数据；
遍历数据数组，创建新的行和单元格，并填充数据；
将新行添加到<tbody>标签中。

示例代码：

var data = [
  {name: '张三', age: 25, gender: '男', address: '北京'},
  {name: '李四', age: 30, gender: '男', address: '上海'},
  {name: '王五', age: 28, gender: '女', address: '广州'}
];

var tbody = document.querySelector('#myTable tbody');
for (var i = 0; i < data.length; i++) {
  var tr = document.createElement('tr');
  tr.innerHTML = '<td>' + data[i].name + '</td>' +
                 '<td>' + data[i].age + '</td>' +
                 '<td>' + data[i].gender + '</td>' +
                 '<td>' + data[i].address + '</td>';
  tbody.appendChild(tr);
}

2. 筛选数据

我们可以通过用户输入关键字或者选择某一列排序方式来实现数据的筛选。具体实现可以采用如下的步骤：

创建一个输入框或者下拉菜单，用于用户输入筛选条件；
监听输入框或者下拉菜单的input或change事件，根据用户输入的条件动态过滤行；
在过滤前需要保存原始数据，以便还原数据。

示例代码：

var originData = [
  {name: '张三', age: 25, gender: '男', address: '北京'},
  {name: '李四', age: 30, gender: '男', address: '上海'},
  {name: '王五', age: 28, gender: '女', address: '广州'}
];

var data = originData;

var input = document.querySelector('#filterInput');
input.addEventListener('input', function() {
  var keyword = input.value.trim().toLowerCase();
  data = originData.filter(function(item) {
    return item.name.toLowerCase().indexOf(keyword) >= 0 ||
           item.address.toLowerCase().indexOf(keyword) >= 0;
  });
  renderTable();
});

function renderTable() {
  var tbody = document.querySelector('#myTable tbody');
  tbody.innerHTML = '';
  for (var i = 0; i < data.length; i++) {
    var tr = document.createElement('tr');
    tr.innerHTML = '<td>' + data[i].name + '</td>' +
                   '<td>' + data[i].age + '</td>' +
                   '<td>' + data[i].gender + '</td>' +
                   '<td>' + data[i].address + '</td>';
    tbody.appendChild(tr);
  }
}

3. 排序数据

我们可以通过用户点击表格头部来实现数据的排序。具体实现可以采用如下的步骤：

为每一列的表头添加一个点击事件监听器；
监听器中根据当前列的数据值和排序方式（升序/降序）对表格行进行排序；
排序前需要保存原始数据，以便还原数据。

示例代码：

var originData = [
  {name: '张三', age: 25, gender: '男', address: '北京'},
  {name: '李四', age: 30, gender: '男', address: '上海'},
  {name: '王五', age: 28, gender: '女', address: '广州'}
];

var data = originData;
var sortBy = 'name'; // 默认按照姓名排序
var sortOrder = 'asc'; // 默认升序排列

var ths = document.querySelectorAll('#myTable th');
for (var i = 0; i < ths.length; i++) {
  ths[i].addEventListener('click', function() {
    var key = this.dataset.key;
    if (sortBy === key) {
      sortOrder = sortOrder === 'asc' ? 'desc' : 'asc';
    } else {
      sortBy = key;
      sortOrder = 'asc';
    }
    sortTable();
    renderTable();
  });
}

function sortTable() {
  var compare;
  if (sortOrder === 'asc') {
    compare = function(a, b) {
      if (typeof a[sortBy] === 'number' && typeof b[sortBy] === 'number') {
        return a[sortBy] - b[sortBy];
      } else {
        return a[sortBy].toString().localeCompare(b[sortBy].toString());
      }
    };
  } else {
    compare = function(a, b) {
      if (typeof a[sortBy] === 'number' && typeof b[sortBy] === 'number') {
        return b[sortBy] - a[sortBy];
      } else {
        return b[sortBy].toString().localeCompare(a[sortBy].toString());
      }
    };
  }
  data = data.sort(compare);
}

function renderTable() {
  var tbody = document.querySelector('#myTable tbody');
  tbody.innerHTML = '';
  for (var i = 0; i < data.length; i++) {
    var tr = document.createElement('tr');
    tr.innerHTML = '<td>' + data[i].name + '</td>' +
                   '<td>' + data[i].age + '</td>' +
                   '<td>' + data[i].gender + '</td>' +
                   '<td>' + data[i].address + '</td>';
    tbody.appendChild(tr);
  }
}

4. 分页数据

如果数据量很大，我们可以通过分页来提高数据的显示效率和用户体验。具体实现可以采用如下的步骤：

设置每页显示的数据条数和当前页码；
根据当前页码和每页显示的数据条数计算出需要显示的数据范围；
显示当前页的数据并更新页码和页码按钮状态。

示例代码：

var originData = [
  {name: '张三', age: 25, gender: '男', address: '北京'},
  {name: '李四', age: 30, gender: '男', address: '上海'},
  {name: '王五', age: 28, gender: '女', address: '广州'},
  {name: '赵六', age: 33, gender: '男', address: '深圳'},
  {name: '钱七', age: 27, gender: '女', address: '西安'},
  {name: '孙九', age: 31, gender: '男', address: '武汉'},
  // ... 省略部分数据
  {name: '吴十', age: 26, gender: '女', address: '天津'}
];

var data = originData;
var perPage = 5; // 每页显示5条数据
var currentPage = 1; // 当前第1页

var inputPage = document.querySelector('#inputPage');
var btnPrev = document.querySelector('#btnPrev');
var btnNext = document.querySelector('#btnNext');

inputPage.addEventListener('input', function() {
  var num = parseInt(inputPage.value);
  if (num >= 1 && num <= getTotalPage()) {
    currentPage = num;
    renderTable();
  }
});

btnPrev.addEventListener('click', function() {
  if (currentPage > 1) {
    currentPage--;
    renderTable();
  }
});

btnNext.addEventListener('click', function() {
  if (currentPage < getTotalPage()) {
    currentPage++;
    renderTable();
  }
});

function getTotalPage() {
  return Math.ceil(data.length / perPage);
}

function getPageData() {
  var start = (currentPage - 1) * perPage;
  var end = Math.min(start + perPage, data.length);
  return data.slice(start, end);
}

function renderTable() {
  var tbody = document.querySelector('#myTable tbody');
  tbody.innerHTML = '';
  var pageData = getPageData();
  for (var i = 0; i < pageData.length; i++) {
    var tr = document.createElement('tr');
    tr.innerHTML = '<td>' + pageData[i].name + '</td>' +
                   '<td>' + pageData[i].age + '</td>' +
                   '<td>' + pageData[i].gender + '</td>' +
                   '<td>' + pageData[i].address + '</td>';
    tbody.appendChild(tr);
  }
  inputPage.value = currentPage;
  btnPrev.disabled = currentPage === 1;
  btnNext.disabled = currentPage === getTotalPage();
}