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

我正在使用DataTables，并且发现了如何将其UI翻译成西班牙语。因为我不想把这个翻译代码，每次我创建使用数据表视图做什么，我已决定将下面的代码保存到一个单独的.js文件：如何将元素的id传递给.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文件应该捕捉它。

我该怎么做？

来源

2015-06-04 Pathros

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

来源

2015-06-04 19:26:01 zeppelin

在解决方案3中，不需要调用each（）。当你调用'jQuery（）'时，它会返回一个对象数组，其中链接的函数获取它们中的每一个的上下文。同样的理由，你不需要写'$（'。boxes'）。each（$（this）.hide（））'来隐藏每个匹配的元素。 – azium

真正的问题是你怎么知道哪个元素传递给你的DataTable函数。考虑以下内容：

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

您将不得不做两件事之一。按照您的建议（不工作）通过src=".."传递您想要的id的名称，或者您将不得不修改someVariable。在这两种情况下，你都必须手动告诉代码你想要哪个元素，所以你并不是真的为自己节省很多工作。

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

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

只要你的表始终以“数据表 - ”像这种方式启动：

id="data-table-something-something"

的功能，而无需进行硬编码的ID（或多个ID的）运行每次。

来源

2015-06-04 19:02:26 azium

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

回答

相关问题