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

我正在使用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）。。。 但是，如果我必须在一个视图中使用多个数据表，我该怎么办

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

---

我如何才能做到这一点？

真正的问题是如何知道将哪个元素传递给

DataTable

函数。考虑以下事项：

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

你必须做两件事中的一件。按照您的建议，通过

src=“…”

传递您想要的

id

的名称（不起作用），否则您必须修改

someVariable

。在这两种情况下，您都必须手动告诉代码您想要哪个元素，这样您就不会真正节省很多工作

您可以做的是遵循某种命名约定，以便您的函数始终匹配一组选择器

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

这样，只要您的表始终以“数据表-”开头，例如：

id="data-table-something-something"

---

您的函数将无需每次硬编码ID（或多个ID）即可运行。

解决方案1: 为datatable的id声明一个全局变量，并在脚本文件中使用它，这只适用于一个datatable，但是您可以使用一个全局声明的id数组，并在.js文件中对其进行迭代，如果您希望它适用于多个datatable，则为每个id调用例程。然而，不鼓励使用全局变量，但这样做就可以了

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

然后将其包含在视图文件中，如下所示：

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

解决方案3: 正如azium所建议的，为数据表ID使用一个通用的前缀名称，如

“#my_datatable_*******”

，并在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", 
                }
        }
    });
});  
} );

---

在解决方案3中，不需要调用

each（）

。调用

jQuery（）

时，它返回一个对象数组，链式函数从中获取每个对象的上下文。同样的原因，您不需要编写

$（'.box'）。each（$（this.hide（））

来隐藏每个匹配的元素。

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

$(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", 
                }
        }
    });
});  
} );