Question

这可能吗？如果列export class AppComponent { ngOnInit() { const s = interval(interval_in_mili_sec); s.subscribe(value => { // call id token API }); } }不为空，我试图隐藏批准按钮。这来自服务器端数据表。我的问题是，因为我正在使用approvedby，所以找不到其他的使用方式。

这是脚本。

return ""

这是结果。我似乎找不到$(function() { $('#example').DataTable( { dom: "Bfrtip", ajax: { url: "earnings_amendment_account_table.php", type: "POST" }, serverSide: true, columns: [ { data: "accountcode" }, { data: "accounttitle" }, { data: "accounttype" }, { data: "approvedby" }, { "data": "accountcode", "name": " ", "autoWidth": true, "render": function (data, type, full, meta) { return "<button class='btn btn-success btn-sm btn-flat edit' data-id='"+full.accountcode+"'><i class='fa fa-edit'></i> Edit</button> <button class='btn btn-danger btn-sm btn-flat delete' data-id='"+full.accountcode+"'><i class='fa fa-trash'></i> Delete</button> if (empty("+full.approvedby+")) { <button class='btn btn-warning btn-sm approve btn-flat' data-id='"+full.accountcode+"'><i class='fa fa-check-square-o'></i> Approve</button>}";} } ], select: false, buttons: [] } ); } );在if else内部工作的方法。

Answer 1

我将使用条件运算符检查approvedby属性-如果不为null，则使用包含按钮的字符串，否则使用空字符串。您还可以使用模板文字来大大提高可读性：

$('#example').DataTable({
  dom: "Bfrtip",
  ajax: {
    url: "earnings_amendment_account_table.php",
    type: "POST"
  },
  serverSide: true,
  columns: [{
      data: "accountcode"
    },
    {
      data: "accounttitle"
    },
    {
      data: "accounttype"
    },
    {
      data: "approvedby"
    },
    {
      "data": "accountcode",
      "name": " ",
      "autoWidth": true,
      "render": function(data, type, { accountcode, approvedby }, meta) {
        return `
          <button class='btn btn-success btn-sm btn-flat edit' data-id='${accountcode}'>
            <i class='fa fa-edit'></i>
            Edit
          </button>
          <button class='btn btn-danger btn-sm btn-flat delete' data-id='${accountcode}'>
            <i class='fa fa-trash'></i>
            Delete
          </button>
          ${approvedby !== null
            ? `<button class='btn btn-warning btn-sm approve btn-flat' data-id='${accountcode}'>
                 <i class='fa fa-check-square-o'></i>
                 Approve
               </button>}`
            : ''
          }
         `;
      }
    }
  ],
  select: false,
  buttons: []
});

另一种选择是在定义原始HTML之后，使用if语句与要返回的字符串连接：

$('#example').DataTable({
  dom: "Bfrtip",
  ajax: {
    url: "earnings_amendment_account_table.php",
    type: "POST"
  },
  serverSide: true,
  columns: [{
      data: "accountcode"
    },
    {
      data: "accounttitle"
    },
    {
      data: "accounttype"
    },
    {
      data: "approvedby"
    },
    {
      "data": "accountcode",
      "name": " ",
      "autoWidth": true,
      "render": function(data, type, { accountcode, approvedby }, meta) {
        let str = `
          <button class='btn btn-success btn-sm btn-flat edit' data-id='${accountcode}'>
            <i class='fa fa-edit'></i>
            Edit
          </button>
          <button class='btn btn-danger btn-sm btn-flat delete' data-id='${accountcode}'>
            <i class='fa fa-trash'></i>
            Delete
          </button>
        `;
        if (approvedby !== null) {
          str += `
            <button class='btn btn-warning btn-sm approve btn-flat' data-id='${accountcode}'>
              <i class='fa fa-check-square-o'></i>
              Approve
            </button>}`;
        }
        return str;
      }
    }
  ],
  select: false,
  buttons: []
});

Answer 2

好吧，您正在字符串中传递if语句，这将告诉您的浏览器

以JavaScript读取此字符串
以字符串形式读取

哪个浏览器将不会解释为代码。

而是尝试这样的事情：

$(function() {
    $('#example').DataTable( {
        dom: "Bfrtip",
        ajax: {
            url: "earnings_amendment_account_table.php",
            type: "POST"
        },
        serverSide: true,
        columns: [
            { data: "accountcode" },
            { data: "accounttitle" },
            { data: "accounttype" },
            { data: "approvedby" },
            { "data": "accountcode", "name": " ", "autoWidth": true, "render": function (data, type, full, meta) {
              return `<button class='btn btn-success btn-sm btn-flat edit' data-id='${full.accountcode}'>
                <i class='fa fa-edit'></i> Edit
              </button>
              <button class='btn btn-danger btn-sm btn-flat delete' data-id='${full.accountcode}'>
                <i class='fa fa-trash'></i> Delete
              </button>
              ${(full.approvedby == '') ? `<button class='btn btn-warning btn-sm approve btn-flat' data-id='${full.accountcode}'><i class='fa fa-check-square-o'></i> Approve</button>` : ''}`;
          }
        ],
        select: false,
        buttons: []
    } );
} );

这将阻止JavaScript读取字符串，并实际上查询approvedby中是否有值。

Answer 3

尝试一下

$(function() {
    $('#example').DataTable( {
        dom: "Bfrtip",
        ajax: {
            url: "earnings_amendment_account_table.php",
            type: "POST"
        },
        serverSide: true,
        columns: [
            { data: "accountcode" },
            { data: "accounttitle" },
            { data: "accounttype" },
            { data: "approvedby" },
            { 
                data: "accountcode",
                name: " ",
                autoWidth: true,
                render: function (data, type, full, meta) {
                    let html = "<button class='btn btn-success btn-sm btn-flat edit' data-id='"+full.accountcode+"'><i class='fa fa-edit'></i> Edit</button> ";
                    html += "<button class='btn btn-danger btn-sm btn-flat delete' data-id='"+full.accountcode+"'><i class='fa fa-trash'></i> Delete</button> ";
                    html += "<button class='btn btn-danger btn-sm btn-flat delete' data-id='"+full.accountcode+"'><i class='fa fa-trash'></i> Delete</button> ";

                    if (!full.approvedby)
                        html += "<button class='btn btn-warning btn-sm approve btn-flat' data-id='"+full.accountcode+"'><i class='fa fa-check-square-o'></i> Approve</button>";

                   return html;
                }
            }
        ],
        select: false,
        buttons: []
    } );
} );

请注意，我删除了if语句中使用的empty（）函数。

之所以不起作用，是因为您将if语句写为字符串，因此它没有作为javascript代码处理。

这是一个有关如何在javascript中内联if语句的示例。

return 'Hello my name is ' + (name === 'Miroslav' ? name : 'Anonymous') + ' and I just wrote an inline if statement';

如果else语句内部返回“”语句

3 个答案: