Question

我正在使用DataTables，我发现了如何将其UI翻译成西班牙语。由于我不想每次创建一个将使用dataTables的视图时调用此转换代码，我决定将以下代码存储到单独的.js文件中：

$(document).ready( function () {
    $('#table_id').DataTable({
        "language":{
            "lengthMenu":"Mostrar _MENU_ registros por página.",
            "zeroRecords": "Lo sentimos. No se encontraron registros.",
            "info": "Mostrando página _PAGE_ de _PAGES_",
            "infoEmpty": "No hay registros aún.",
            "infoFiltered": "(filtrados de un total de _MAX_ registros)",
            "search" : "Búsqueda",
            "LoadingRecords": "Cargando ...",
            "Processing": "Procesando...",
            "SearchPlaceholder": "Comience a teclear...",
            "paginate": {
                "previous": "Anterior",
                "next": "Siguiente", 
                }
        }
    });
} );

然后我会使用javascript标记调用此文件，如下所示：

<script src="{{URL::asset('DataTables-1.10.7/media/js/dataTables.MX_es.js')}}"></script>

我不知道如何将相关标识符 #table_id 传递给我的.js文件调用。

我现在得到的一个临时解决方案是将此标识符设为固定（#table_id）... 但如果我不得不在视图中使用多个dataTable，我会怎么做？

这就是为什么我需要将id作为变量传递而.js文件应该捕获它。

我该怎么做？

Answer 1

解决方案1： 为datatable的id声明一个全局变量并在脚本文件中使用它，这只适用于一个数据表，但是你可以使用全局声明的id数组并在你的.js文件中迭代它们并为每个数据调用你的例程id，如果您希望它适用于多个数据表。但是，不鼓励使用全局变量，但这可以解决问题。

<script> var myGlobalPlaceholder = "#myDatatable"; </script>
<script src="{{URL::asset('DataTables-1.10.7/media/js/dataTables.MX_es.js')}}"></script>

解决方案2： 由于您需要在单个页面上为多个数据表执行此操作，为什么不将以下代码放在单独的.js文件中，我们可以说initializer.js：

//File: initializer.js:
    var spanishDatatableInitializer =function(table_id)
    {
        $(table).DataTable({
                "language":{
                    "lengthMenu":"Mostrar _MENU_ registros por página.",
                    "zeroRecords": "Lo sentimos. No se encontraron registros.",
                    "info": "Mostrando página _PAGE_ de _PAGES_",
                    "infoEmpty": "No hay registros aún.",
                    "infoFiltered": "(filtrados de un total de _MAX_ registros)",
                    "search" : "Búsqueda",
                    "LoadingRecords": "Cargando ...",
                    "Processing": "Procesando...",
                    "SearchPlaceholder": "Comience a teclear...",
                    "paginate": {
                        "previous": "Anterior",
                        "next": "Siguiente", 
                        }
                }
            });
    }

然后将其包含在您的View文件中，如下所示：

<script type="text/javascript" src="initializer.js"></script>

对于该页面的特定.js文件，为您视图中的每个数据表ID调用该函数：

$(document).ready(function () {
   spanishDatatableInitializer("#tableId1");
   spanishDatatableInitializer("#tableId2");
})

解决方案3： 正如azium建议的那样，为"#my_datatable_*******"等数据表ID使用通用的前缀名称，并在js文件中执行以下操作：

$(document).ready( function () {
var dataTables = [];

$("div[id^='#my_datatable_']").each(function(){
  // dataTables.push(this.id);  // only for testing
$(this.id).DataTable({
        "language":{
            "lengthMenu":"Mostrar _MENU_ registros por página.",
            "zeroRecords": "Lo sentimos. No se encontraron registros.",
            "info": "Mostrando página _PAGE_ de _PAGES_",
            "infoEmpty": "No hay registros aún.",
            "infoFiltered": "(filtrados de un total de _MAX_ registros)",
            "search" : "Búsqueda",
            "LoadingRecords": "Cargando ...",
            "Processing": "Procesando...",
            "SearchPlaceholder": "Comience a teclear...",
            "paginate": {
                "previous": "Anterior",
                "next": "Siguiente", 
                }
        }
    });
});  
} );

Answer 2

真正的问题是，您如何知道要传递给DataTable函数的元素。请考虑以下事项：

$(document).ready(function () {
  $(someVariable).DataTables({ ... })
})

你必须做两件事之一。按照建议（不会开始工作）通过id传递您想要的src=".."名称，否则您将需要修改someVariable。在这两种情况下，您都必须手动告诉代码您想要哪个元素，这样您就不会为自己节省太多工作。

你可以做的是遵循某种命名约定，这样你的函数总是匹配一组选择器。

$(document).ready(function () {
  $('[id^="data-table-"]').DataTables({ ... })
})

这种方式只要您的表格始终以＆＃39; data-table - ＆＃39;喜欢：

id="data-table-something-something"

您的功能无需每次都对ID（或多个ID）进行硬编码即可运行。

如何将元素的id传递给.js文件？

2 个答案: