Question

我正在尝试使用javascript渲染表格，如下所示：

$('#serviceTable').DataTable({
        responsive: true,
        aaData: services,
        bJQueryUI: true,
             aoColumns: [
                     { mData: 'service_name' },
                     { mData: 'last_incident' },
                     { mData: 'integration' }
                ]
      });

我想要列service_name列中的文字超链接。我尝试在表定义中添加data-formatter，如下所示

<table id="serviceTable" class="table table-bordered table-striped">
  <thead>
  <tr>
    <th data-field="service_name" data-formatter="LinkFormatter">Service</th>
    <th data-field="last_incident">Last Incident</th>
    <th  data-field="integration">Integration</th>
  </tr>
  </thead>
</table>

和相应的功能

function LinkFormatter(value, row, index) {
        return "<a href='/service/"+row.service_id+"'>"+value+"</a>";
}

但这不会添加超链接。有人可以帮忙吗？

Answer 1

您是否尝试过DataTables DbSet<ApplicationUser>选项？ DataTables Column Rendering

    public class ApplicationDbContext : IdentityDbContext<ApplicationUser>
{       
    private readonly HttpContext httpContext;

    public ApplicationDbContext(DbContextOptions<ApplicationDbContext> options, IHttpContextAccessor contextAccessor)
        : base(options)
    {
        this.httpContext = contextAccessor.HttpContext;
    }       
    public DbSet<ApplicationUser> ApplicationUser { get; set; }
    public override EntityEntry<TEntity> Add<TEntity>(TEntity entity)
    {
        DatabaseEntity dbEntity = (entity as DatabaseEntity);
        var userName = httpContext.User.Identity.Name;
        if (dbEntity != null)
        {
            dbEntity.Created = DateTime.Now;
            dbEntity.Creator = userName == null ? null : ApplicationUser.Where(user => user.UserName == userName).FirstOrDefault();
        }
        return base.Add(entity);    
    }
    protected override void OnModelCreating(ModelBuilder builder)
    {
        base.OnModelCreating(builder);            
    }        
}

Answer 2

尝试使用render，如下所示。

  $('#serviceTable').DataTable({
        responsive: true,
        aaData: service,
        bJQueryUI: true,
             aoColumns: [
                     { 
                       mData: 'service_name' ,
                       "render": function(value, type, row, meta){
                        return "<a href='/service/"+row.service_id+"'>"+value+"</a>";
                       }
                     },
                     { mData: 'last_incident' },
                     { mData: 'integration' }
                ]
      }

）;

工作样本

＆＃13;

  <head>
    <link rel="stylesheet" href="//cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css">
    <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
    <script src="//cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
  </head>

  <body>
    <table id="serviceTable" class="table table-bordered table-striped">
        <thead>
          <tr>
                <th data-field="service_name" data-formatter="LinkFormatter">Service</th>
                <th data-field="last_incident">Last Incident</th>
                <th  data-field="integration">Integration</th>
          </tr>
          
  </thead>
</table>
  </body>
  <script>
  var service=[{"service_id" :"1", "service_name":"Service 1","last_incident":"i1","integration":"i2"}
        ,{"service_id" :"2", "service_name":"Service 2","last_incident":"i1","integration":"i2"}
        ];
    $('#serviceTable').DataTable({
        responsive: true,
        aaData: service,
        bJQueryUI: true,
             aoColumns: [
                     { 
                       mData: 'service_name' ,
                       "render": function(value, type, row, meta){
                        return "<a href='/service/"+row.service_id+"'>"+value+"</a>";
                       }
                     },
                     { mData: 'last_incident' },
                     { mData: 'integration' }
                ]
      });
     
  </script>

＆＃13;

data-formatter添加超链接不起作用

2 个答案: