ASP.NET C#使用下拉列表更改语言JavaScript DataTables

oknrviil 于 2023-06-28 发布在 Java

关注(0)|答案(1)|浏览(63)

我正在做一个项目。由于项目支持多语言，我希望datatable根据dropdownlist中的值进行更改。
我写了一段JavaScript代码，但是这段代码可以立即工作，并且之后不会显示数据表。

ASP代码

<asp:DropDownList ID="ddlLang" runat="server" CssClass="selectpicker w-auto form-control-sm" AutoPostBack="true" OnSelectedIndexChanged="ddLang_SelectedIndexChanged">  
          <asp:ListItem Value="tr" data-icon="flag-icon flag-icon-tr mr-2" Text="<%$Resources:Resources, LangTR %>">  </asp:ListItem>
          <asp:ListItem Value="en" data-icon="flag-icon flag-icon-gb mr-2" Text="<%$Resources:Resources, LangEN %>"> English </asp:ListItem>  
       </asp:DropDownList>

JavaScript代码

<script type="text/javascript">
    $(function () {
            $('#ddlLang').on('change value',  function () {
            var ddlvalue = $(this).val();
                if (ddlvalue == 'tr') {
                    $('#regIn').DataTable({
                        "paging": true,
                        "lengthChange": true,
                        "searching": false,
                        "ordering": true,
                        "info": true,
                        "autoWidth": false,
                        "responsive": true,
                        "language": {
                            "url": "//cdn.datatables.net/plug-ins/9dcbecd42ad/i18n/Turkish.json"
                        }
                    });
                }
                else if (ddlvalue == 'en') {
                    $('#regIn').DataTable({
                        "paging": true,
                        "lengthChange": true,
                        "searching": false,
                        "ordering": true,
                        "info": true,
                        "autoWidth": false,
                        "responsive": true,
                        "language": {
                            "url": "//cdn.datatables.net/plug-ins/1.13.4/i18n/en-GB.json"
                        }
                    });
                }
            });
        });

JavaScript

来源：https://stackoverflow.com/questions/76540875/asp-net-c-sharp-changing-language-with-dropdownlist-javascript-datatables

1条答案

按热度按时间

30byixjq1#

你的代码有一些问题。首先，在再次初始化同一个表上的DataTable之前，需要销毁DataTable。此外，您还可以减少初始化的冗余。唯一明显的区别是language.url路径，因此您可以在初始化中使用一个变量，并在下拉列表更改时设置该变量。
一个工作示例是here

HTML

<select id=ddlLang>
  <option value="">Select Lang</option>
  <option value="German">German</option>
  <option value="Turkish">Turkish</option>
</select>

<table id="example" class="display" style="width:100%">
  <thead>
    <tr>
      <th>Name</th>
      <th>Position</th>
      <th>Office</th>
      <th>Age</th>
      <th>Start date</th>
      <th>Salary</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Tiger Nixon</td>
      <td>System Architect</td>
      <td>Edinburgh</td>
      <td>61</td>
      <td>2011/04/25</td>
      <td>$320,800</td>
    </tr>
    <tr>
      <td>Garrett Winters</td>
      <td>Accountant</td>
      <td>Tokyo</td>
      <td>63</td>
      <td>2011/07/25</td>
      <td>$170,750</td>
    </tr>
    <tr>
      <td>Ashton Cox</td>
      <td>Junior Technical Author</td>
      <td>San Francisco</td>
      <td>66</td>
      <td>2009/01/12</td>
      <td>$86,000</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <th>Name</th>
      <th>Position</th>
      <th>Office</th>
      <th>Age</th>
      <th>Start date</th>
      <th>Salary</th>
    </tr>
  </tfoot>
</table>

JS

var urlVal = "";

//default init in English
$('#example').DataTable();

function initTable() {
  //test if Datatable already exists
  if ($.fn.DataTable.isDataTable('#example')) {
    //if it exists, destroy
    $('#example').DataTable().destroy();
  }
//init the datatable
  $('#example').DataTable({
    "language": {
      "url": urlVal
    }
  });
}

$('#ddlLang').on('change', function() {
  var selected = $(this).val();
  if (selected === "Turkish") {
    urlVal = "//cdn.datatables.net/plug-ins/9dcbecd42ad/i18n/Turkish.json";
  } else if (selected === "German") {
  urlVal = "//cdn.datatables.net/plug-ins/9dcbecd42ad/i18n/German.json"
}

initTable();
});

赞(0）回复(0）举报 2023-06-28

我来回答

ASP.NET C#使用下拉列表更改语言JavaScript DataTables

1条答案

相关问题

热门标签

最新问答