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

Question

我正在使用 DataTables，我已经找到了如何将它的 UI 翻译成西班牙语。由于我不想每次创建一个将使用数据表的视图时都调用此转换代码，因此我决定将以下代码存储到一个单独的 .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 文件应该捕获它的原因。

我该怎么做？

Answer 1

真正的问题是您如何知道要将哪个元素传递给 DataTable 函数。考虑以下因素：

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

您将必须执行以下两项操作之一。按照您的建议将您想要的 id 的名称通过 src=".." 传递（不会起作用），否则您将不得不修改 someVariable。在这两种情况下，你都必须手动告诉代码你想要哪个元素，所以你并没有真正为自己节省很多工作。

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

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

这样只要你的表总是以 'data-table-' 开头，比如：

id="data-table-something-something"

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

Answer 2

解决方案 1： 为数据表的 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", 
                        }
                }
            });
    }

然后像这样将其包含在您的视图文件中：

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

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

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

解决方案 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", 
                }
        }
    });
});  
} );

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

How to pass id of an element to a .js file?

javascript

jquery

jquery-datatables