用layui实现花类信息管理，列名有花的名称，价格，总数量，剩余数量，管理，有分页管理，数量列有排序功能，序号有全选功能

首先，需要使用layui框架搭建页面和实现分页、排序和全选功能。以下是一个简单的示例代码，可以根据具体需求进行修改：

HTML：

<table class="layui-table" lay-filter="flowerTable">
  <thead>
    <tr>
      <th lay-data="{type:'checkbox'}"></th>
      <th lay-data="{field:'name', sort:true}">花的名称</th>
      <th lay-data="{field:'price', sort:true}">价格</th>
      <th lay-data="{field:'total', sort:true}">总数量</th>
      <th lay-data="{field:'remaining', sort:true}">剩余数量</th>
      <th>管理</th>
    </tr>
  </thead>
  <tbody>
    <!-- 这里使用模板引擎动态渲染数据 -->
    {{# layui.each(d.data, function(index, item){ }}
    <tr>
      <td><input type="checkbox" name="flowerIds[]" value="{{ item.id }}"></td>
      <td>{{ item.name }}</td>
      <td>{{ item.price }}</td>
      <td>{{ item.total }}</td>
      <td>{{ item.remaining }}</td>
      <td>
        <button class="layui-btn layui-btn-xs" onclick="editFlower({{ item.id }})">编辑</button>
        <button class="layui-btn layui-btn-danger layui-btn-xs" onclick="deleteFlower({{ item.id }})">删除</button>
      </td>
    </tr>
    {{# }); }}
  </tbody>
</table>
<div id="flowerPagination" class="layui-laypage"></div>

JavaScript：

// 定义全局变量，用于存储当前页数和每页显示数量
var page = 1;
var limit = 10;

// 初始化分页组件
layui.use(['layer', 'laypage'], function(){
  var laypage = layui.laypage;
  laypage.render({
    elem: 'flowerPagination',
    count: 100, // 数据总数，需要从后端获取
    limit: limit,
    curr: page,
    jump: function(obj, first){
      // obj包含了当前分页的所有参数，可以根据这些参数从后端获取数据
      page = obj.curr;
      limit = obj.limit;
      // 第一次加载页面时不触发查询操作
      if (!first) {
        queryFlowers();
      }
    }
  });
});

// 查询花类信息并渲染到页面中
function queryFlowers() {
  // 根据当前页数和每页显示数量从后端获取数据
  $.ajax({
    url: '/flowers',
    type: 'get',
    data: {
      page: page,
      limit: limit
    },
    success: function(res) {
      // 使用模板引擎渲染数据到页面中
      var html = template('flowerTpl', res);
      $('#flowerTable tbody').html(html);
    },
    error: function(err) {
      layer.msg('查询失败，请稍后重试！');
    }
  });
}

// 对数量列进行排序
function sortFlowers(field) {
  // 根据排序字段和排序方式从后端获取数据
  $.ajax({
    url: '/flowers',
    type: 'get',
    data: {
      page: page,
      limit: limit,
      sortField: field,
      sortOrder: 'asc' // 也可以根据需要设置为desc
    },
    success: function(res) {
      // 使用模板引擎渲染数据到页面中
      var html = template('flowerTpl', res);
      $('#flowerTable tbody').html(html);
    },
    error: function(err) {
      layer.msg('排序失败，请稍后重试！');
    }
  });
}

// 全选和取消全选
function selectAll() {
  if ($('#selectAll').prop('checked')) {
    $('input[name="flowerIds[]"]').prop('checked', true);
  } else {
    $('input[name="flowerIds[]"]').prop('checked', false);
  }
}

// 批量删除花类信息
function deleteFlowers() {
  var ids = [];
  $('input[name="flowerIds[]"]:checked').each(function(){
    ids.push($(this).val());
  });
  if (ids.length == 0) {
    layer.msg('请先选择要删除的记录！');
    return;
  }
  $.ajax({
    url: '/flowers',
    type: 'delete',
    data: {
      ids: ids.join(',')
    },
    success: function(res) {
      layer.msg('删除成功！');
      queryFlowers();
    },
    error: function(err) {
      layer.msg('删除失败，请稍后重试！');
    }
  });
}

// 编辑花类信息
function editFlower(id) {
  // 根据id从后端获取要编辑的花类信息，并弹出编辑框进行编辑
  $.ajax({
    url: '/flowers/' + id,
    type: 'get',
    success: function(res) {
      // 使用layer弹出编辑框
      layer.open({
        type: 1,
        title: '编辑花类信息',
        content: $('#editFlowerForm'),
        success: function(layero, index){
          // 将要编辑的花类信息填充到表单中
          $('#editFlowerForm input[name="id"]').val(res.id);
          $('#editFlowerForm input[name="name"]').val(res.name);
          $('#editFlowerForm input[name="price"]').val(res.price);
          $('#editFlowerForm input[name="total"]').val(res.total);
          $('#editFlowerForm input[name="remaining"]').val(res.remaining);
        }
      });
    },
    error: function(err) {
      layer.msg('获取数据失败，请稍后重试！');
    }
  });
}

// 保存花类信息
function saveFlower() {
  var id = $('#editFlowerForm input[name="id"]').val();
  var name = $('#editFlowerForm input[name="name"]').val();
  var price = $('#editFlowerForm input[name="price"]').val();
  var total = $('#editFlowerForm input[name="total"]').val();
  var remaining = $('#editFlowerForm input[name="remaining"]').val();
  $.ajax({
    url: '/flowers/' + id,
    type: 'put',
    data: {
      name: name,
      price: price,
      total: total,
      remaining: remaining
    },
    success: function(res) {
      layer.msg('保存成功！');
      layer.closeAll();
      queryFlowers();
    },
    error: function(err) {
      layer.msg('保存失败，请稍后重试！');
    }
  });
}

// 删除单个花类信息
function deleteFlower(id) {
  $.ajax({
    url: '/flowers/' + id,
    type: 'delete',
    success: function(res) {
      layer.msg('删除成功！');
      queryFlowers();
    },
    error: function(err) {
      layer.msg('删除失败，请稍后重试！');
    }
  });
}

需要注意的是，以上代码中使用了模板引擎来动态渲染花类信息，需要在页面中引入模板引擎库。另外，需要根据具体情况修改AJAX请求地址和请求参数。