Question

我正在使用DataTables插件在项目中创建一个表，我想在表中添加一个编辑按钮。我使用此demo知道如何制作按钮，但是在我的项目中它不起作用，我也不知道为什么。

我的代码：

import sys
import os
import numpy as np
from os import walk
import cv2

# width to resize
width = int(sys.argv[1])
# height to resize
height = int(sys.argv[2])
# location of the input dataset
input_dir = sys.argv[3]
# location of the output dataset
out_dir = sys.argv[4]

if len(sys.argv) != 5:
    print("Please specify width, height, input directory and output directory.")
    sys.exit(0)

print("Working...")

# get all the pictures in directory
images = []
ext = (".jpeg", ".jpg", ".png")

for (dirpath, dirnames, filenames) in walk(input_dir):
  for filename in filenames:
        if filename.endswith(ext):
            images.append(os.path.join(dirpath, filename))
            print(filename)

for image in images:
    img = cv2.imread(image, cv2.IMREAD_UNCHANGED)

    h, w = img.shape[:2]
    pad_bottom, pad_right = 0, 0
    ratio = w / h

    if h > height or w > width:
        # shrinking image algorithm
        interp = cv2.INTER_AREA
    else:
        # stretching image algorithm
        interp = cv2.INTER_CUBIC

    w = width
    h = round(w / ratio)
    if h > height:
        h = height
        w = round(h * ratio)
    pad_bottom = abs(height - h)
    pad_right = abs(width - w)

    scaled_img = cv2.resize(img, (w, h), interpolation=interp)
    padded_img = cv2.copyMakeBorder(
        scaled_img,0,pad_bottom,0,pad_right,borderType=cv2.BORDER_CONSTANT,value=[0,0,0])

    cv2.imwrite(os.path.join(out_dir, os.path.basename(image)), padded_img)

print("Completed!")

Answer 1

您忘了包括Buttons，Select，Editor和（可选）Responsive扩展名。

Here是一个基于您的代码的简单工作示例。

HTML：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>Datatables</title>
    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
    <link rel="stylesheet" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.css">
    <link rel="https://cdn.datatables.net/buttons/1.1.2/css/buttons.dataTables.min.css">
    <link rel="https://cdn.datatables.net/select/1.1.2/css/select.dataTables.min.css">
    <link rel="https://cdn.datatables.net/responsive/2.0.2/css/responsive.dataTables.min.css">
  </head>
  <body>

    <div id="datatablecontainer">
      <table class="dataTable" id="datatable"></table>
    </div>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

    <script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.js"></script>
    <script src="https://cdn.datatables.net/buttons/1.1.2/js/dataTables.buttons.min.js"></script>
    <script src="https://cdn.datatables.net/select/1.1.2/js/dataTables.select.min.js"></script>
    <script src="https://cdn.datatables.net/responsive/2.0.2/js/dataTables.responsive.min.js"></script>
    <script src="http://kingkode.com/datatables.editor.lite/js/altEditor/dataTables.altEditor.free.js"></script>
  </body>
</html>

JS：

$(document).ready(function() {
  var data_use = [
      ["Garrett Winters", "Accountant", "Tokyo", "8422"],
      ["Ashton Cox", "Junior Technical Author", "San Francisco", "1562"],
      ["Cedric Kelly", "Senior Javascript Developer", "Edinburgh", "6224"],
      ["Airi Satou", "Accountant", "Tokyo", "5407"],
   ];

  var column_name = [{
    title: "table_1"
    }, {
    title: "table2"
    }, {
    title: "table3"
    }, {
    title: "table4"
  }];

  $('#datatable').DataTable({
    "sPaginationType" : "full_numbers",
    data : data_use,
    columns : column_name,
    dom : 'Bfrtip',
    select : 'single',
    responsive : true,
    altEditor : true,
    //destroy : true,
    searching: false,
    buttons : [{
        extend : 'selected',
        text : 'Edit',
        name : 'edit'
    }],
  });
});

除了使用Bootstrap样式外，Editor Bootstrap 集成还提供了使用 Bootstrap模态控制可与Bootstrap完全集成。

因此，我也包括了Bootstrap库。

Answer 2

你去了

JSFiddle，您必须导入资源菜单上的所有库，并注意jQuery版本。那是你的小提琴上的问题。

var data_use = [
    ["Garrett Winters", "Accountant", "Tokyo", "8422"],
    ["Ashton Cox", "Junior Technical Author", "San Francisco", "1562"],
    ["Cedric Kelly", "Senior Javascript Developer", "Edinburgh", "6224"],
    ["Airi Satou", "Accountant", "Tokyo", "5407"],
 ];

var column_name = [{
    title: "table_1"
    }, {
    title: "table2"
    }, {
    title: "table3"
    }, {
    title: "table4"
}];

$('#datatable').DataTable({
    "sPaginationType" : "full_numbers",
    data : data_use,
  columns : column_name,
  dom : 'Bfrtip',
    select : 'single',
    responsive : true,
    altEditor : true,
    destroy : true,
    searching: false,
    buttons: [
          {
            extend: 'selected', 
            text: 'Edit',
            name: 'edit'
         }]
});

如何在DataTables插件中添加编辑按钮？

2 个答案: