Question

我正在尝试将“查看，更新和删除”按钮添加到我的jquery服务器端数据表中。如下图所示，仅显示删除按钮

Javascript

<Page
    x:Class="BS.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:BS"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    RequestedTheme="Dark"
    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">

    <Page.Resources>

    </Page.Resources>
    <Grid>
        <Grid.Resources>
            <AcrylicBrush x:Key="NavigationViewDefaultPaneBackground"
                          BackgroundSource="HostBackdrop"
                          TintColor="#262626"
                          TintOpacity="0.825"
                          FallbackColor="#262626"/>
        </Grid.Resources>
        <NavigationView IsSettingsVisible="False" x:Name="NavView" PaneTitle="Budget Sheet" IsBackButtonVisible="Collapsed" PaneDisplayMode="LeftMinimal" Background="{StaticResource CustomAcrylicDarkBackground}">
            <NavigationView.MenuItems>
                    <StackPanel Orientation="Horizontal" UseLayoutRounding="False">
                        <AppBarButton Icon="Page2" Margin="0, 2, 1, 0" Tag="New_Sheet" HorizontalAlignment="Center"/>
                        <AppBarButton Icon="OpenFile" Margin="1, 2, 0, 0" Tag="Open_Sheet" HorizontalAlignment="Center"/>
                        <AppBarButton Icon="Save" Margin="1, 2, 0, 0" Tag="Save_Sheet" HorizontalAlignment="Center"/>
                        <AppBarButton Icon="Setting" Margin="1, 2, 0, 0" Tag="Settings_Sheet" HorizontalAlignment="Center"/>
                </StackPanel>                
                <NavigationViewItemSeparator/>
                <NavigationViewItem Name="HomeItem" Content="HOME" Tag="HOME_Page" FontSize="22" HorizontalAlignment="Stretch" FontWeight="Bold" Foreground="#b880fc"/>
                <NavigationViewItemSeparator/>
                <NavigationViewItem Name="OverviewItem" Content="OVERVIEW" Tag="OverView_Page" FontSize="22" HorizontalAlignment="Stretch" FontWeight="Bold" Foreground="#b880fc"/>
                <NavigationViewItem Name="BItem" Content="B" Tag="B_Page" FontSize="22" HorizontalAlignment="Stretch" FontWeight="Bold" Foreground="#b880fc"/>
                <NavigationViewItem Name="PItem" Content="P" Tag="BP_Page" FontSize="22" HorizontalAlignment="Stretch" FontWeight="Bold" Foreground="#b880fc"/>
                <NavigationViewItem Name="TItem" Content="T" Tag="T_Page" FontSize="22" HorizontalAlignment="Stretch" FontWeight="Bold" Foreground="#b880fc"/>
                <NavigationViewItem Name="PDItem" Content="PD" Tag="PD_Page" FontSize="22" HorizontalAlignment="Stretch" FontWeight="Bold" Foreground="#b880fc"/>
            </NavigationView.MenuItems>

            <NavigationView.PaneFooter>
                <StackPanel>
                    <NavigationViewItem Style="{ThemeResource NavigationViewTitleHeaderContentControlTextStyle}" Name="ChangePerson" VerticalAlignment="Stretch" Content="Change User" Icon="Contact" Tag="UserChange_Page" FontSize="16" HorizontalAlignment="Center" FontWeight="Bold" Foreground="#b880fc"/>
                </StackPanel>                                 
            </NavigationView.PaneFooter>
        </NavigationView>
    </Grid>
</Page>

我希望下面的按钮显示在同一列中

<script>
var enabletemplateListVM;
    $(function () {
        enabletemplateListVM = {
            dt: null,
            init: function () {
                dt = $('#templatemessage-data-table').DataTable({
                    "dom": '<"top"if>rt<"bottom"lp><"clear">',
                    "pageLength": 10,
                    "serverSide": true,
                    "processing": true,
                    "order": [[0, "desc"]],
                    "ajax": {
                        "url": "/MessageTemplate/LoadData",
                        "type": "POST",
                        "datatype": "json"
                    },

Answer 1

您可以一起返回所有按钮，因为它们都属于同一列，您的代码是将按钮替换为new，最后只有最后一个按钮

          "columns": [                       
                   {

                        "targets": [0], 
                       "data": "TemplateId", 
                        "render": function (data, type, full)
                        {
                            var a = '@Html.ActionLink("View", "View", new {id = "TemplateId" })'.replace("TemplateId", data);
                          var b = '@Html.ActionLink("Update", "Update", new {id = "TemplateId" })'.replace("TemplateId", data);
                           var c =  '@Html.ActionLink("Delete", "Delete", new {id = "TemplateId" })'.replace("TemplateId", data);
                          return a+b+c;
                        },


                    },
                    { "title": "Template Id", "data": "TemplateId", "name": "TemplateId", "autoWidth": true },
                    { "title": "Team Name", "data": "TeamName", "name": "TeamName", "autoWidth": true },
                    { "title": "Template Name", "data": "TemplateName", "name": "TemplateName", "autoWidth": true },
                    { "title": "Description", "data": "Description", "name": "Description", "autoWidth": true },

                ],

Answer 2

问题在第一列定义

中

{

    "targets": [0], "data": "TemplateId", "render": function (data, type, full)
    {
        return '@Html.ActionLink("View", "View", new {id = "TemplateId" })'.replace("TemplateId", data);

    },
    "targets": [0], "data": "TemplateId", "render": function (data, type, full)
    {
        return '@Html.ActionLink("Update", "Update", new {id = "TemplateId" })'.replace("TemplateId", data);
    },
     "targets": [0], "data": "TemplateId", "render": function (data, type, full)
     {
         return '@Html.ActionLink("Delete", "Delete", new {id = "TemplateId" })'.replace("TemplateId", data);
     }
},

它将始终选择最后一个

要解决此问题，您只需要1 render function

"targets": [0], "data": "TemplateId", "render": function (data, type, full)
{

    // define view button
    var view = '@Html.ActionLink("View", "View", new {id = "TemplateId" })'.replace("TemplateId", data);

    // define update button
    var update = '@Html.ActionLink("Update", "Update", new {id = "TemplateId" })'.replace("TemplateId", data);

    // define delete Button
    var delete =  '@Html.ActionLink("Delete", "Delete", new {id = "TemplateId" })'.replace("TemplateId", data);


    return view+update+delete;  // return all three button

},

按钮没有显示在我的jQuery数据表上

2 个答案: